react如何监听数据变化

在React中，可以使用useState、useEffect和useContext等钩子函数来监听数据变化。

使用useState：useState函数是React提供的一个钩子函数，用于在函数组件中定义和管理状态。通过调用useState函数，可以创建一个状态变量，并返回一个包含当前状态和更新状态的函数的数组。当状态变化时，React会重新渲染组件。可以在组件渲染时访问当前状态，并在需要的地方调用更新状态的函数，从而监听数据变化。

import React, { useState } from 'react';function MyComponent() {  const [data, setData] = useState('');  // 监听data变化  useEffect(() => {    console.log('data变化：', data);  }, [data]);  return (    <div>      <input        type="text"        value={data}        onChange={e => setData(e.target.value)}      />    </div>  );}

使用useEffect：useEffect函数是React提供的一个钩子函数，用于在组件渲染完成后执行副作用操作。可以将一个函数作为参数传递给useEffect，React会在组件渲染完成后调用这个函数。可以在这个函数中监听数据变化，通过依赖项数组来控制执行副作用的时机。

import React, { useState, useEffect } from 'react';function MyComponent() {  const [data, setData] = useState('');  useEffect(() => {    console.log('data变化：', data);  }, [data]);  return (    <div>      <input        type="text"        value={data}        onChange={e => setData(e.target.value)}      />    </div>  );}

使用useContext：useContext函数是React提供的一个钩子函数，用于在组件中访问上下文。可以在上下文中存储和共享数据，并在需要的组件中通过useContext函数来访问这些数据。当上下文中的数据发生变化时，使用该上下文的组件会重新渲染，从而监听数据变化。

import React, { useState, useContext } from 'react';const MyContext = React.createContext();function MyComponent() {  const [data, setData] = useState('');  return (    <MyContext.Provider value={data}>      <ChildComponent />      <input        type="text"        value={data}        onChange={e => setData(e.target.value)}      />    </MyContext.Provider>  );}function ChildComponent() {  const data = useContext(MyContext);  useEffect(() => {    console.log('data变化：', data);  }, [data]);  return (    <div>{data}</div>  );}

以上是在React中监听数据变化的几种常见方式。根据具体的需求和场景，可以选择合适的方式来监听数据变化。