如何监听 react.js 中的状态变化？答案

【问题标题】：How to listen state changes in react.js?如何监听 react.js 中的状态变化？
【发布时间】：2014-12-11 17:02:11
【问题描述】：

在 React.js 中，Angular 的 $watch 函数等价物是什么？

我想监听状态变化并调用 getSearchResults() 之类的函数。

componentDidMount: function() {
    this.getSearchResults();
}

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

如果你使用 const [ name , setName ] = useState (' ') 之类的钩子，可以尝试以下方法：

 useEffect(() => {
      console.log('Listening: ', name);
    }, [name]);

【讨论】：

有没有办法在 useEffect 中获得旧值？假设 name 一开始是空的，然后我输入 I 然后在 useEffect 中我会得到 i 但是如果我想获得以前的状态任何想法怎么办

【解决方案2】：

在 2020 年，您可以像这样使用 useEffect 挂钩来监听状态变化

export function MyComponent(props) {
    const [myState, setMystate] = useState('initialState')

    useEffect(() => {
        console.log(myState, '- Has changed')
    },[myState]) // <-- here put the parameter to listen
}

【讨论】：

但是如何将它用于类组件？

【解决方案3】：

如上所述使用 useState 和 useEffect 是绝对正确的方法。但是如果 getSearchResults 函数返回订阅，那么 useEffect 应该返回一个负责取消订阅的函数。从 useEffect 返回的函数将在每次更改依赖项（上例中的名称）和组件销毁之前运行

【讨论】：

【解决方案4】：

自 2019 年使用 useState 和 useEffect Hooks 的 React 16.8 以来，以下内容现在是等效的（在简单的情况下）：

AngularJS：

$scope.name = 'misko'
$scope.$watch('name', getSearchResults)

<input ng-model="name" />

反应：

const [name, setName] = useState('misko')
useEffect(getSearchResults, [name])

<input value={name} onChange={e => setName(e.target.value)} />

【讨论】：

【解决方案5】：

我没有使用过 Angular，但是阅读上面的链接，您似乎正在尝试编写一些您不需要处理的代码。您在 React 组件层次结构中更改状态（通过 this.setState()），React 将导致您的组件重新渲染（有效地“监听”更改）。如果您想从层次结构中的另一个组件“监听”，那么您有两个选择：

从公共父级向下传递处理程序（通过 props）并让它们更新父级的状态，从而导致重新渲染父级下方的层次结构。
或者，为了避免处理程序在层次结构中向下级联爆炸，您应该查看flux pattern，它将您的状态移动到数据存储中并允许组件观察它们的变化。 Fluxxor plugin 对管理这个非常有用。

【讨论】：

但是当您需要获取使用（部分）状态作为 url / 参数的远程数据时呢？
@RnMss - 查看 redux 和 reducers (redux.js.org/docs/basics/Reducers.html) 并重新选择 (github.com/reactjs/reselect)。
好收获。使用redux 解决它是正确且正确的方法，尤其是对于大型项目和多团队开发。

【解决方案6】：

已经有一段时间了，但供将来参考：可以使用方法 shouldComponentUpdate()。

更新可能是由 props 或 state 的更改引起的。这些方法在组件被调用时按以下顺序调用重新渲染：

static getDerivedStateFromProps() 
shouldComponentUpdate() 
render()
getSnapshotBeforeUpdate() 
componentDidUpdate()

参考：https://reactjs.org/docs/react-component.html

【讨论】：

你必须从 shouldComponentUpdate 返回一个布尔值，所以它可能不适合这个用例。

【解决方案7】：

以下lifecycle methods会在状态改变时被调用。您可以使用提供的参数和当前状态来确定是否发生了有意义的变化。

componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)

【讨论】：

当另一个组件中的属性被更新时需要触发一个方法（通过回调向上一个，通过 prop 向下一个），并且在带有 prop 的组件中添加componentDidUpdate 是正确的处方。谢谢你。
我认为这是保证状态更改通知的最佳方式，这是 OP 所要求的。但请注意，如果您在 shouldComponentUpdate 中否决更新，则这些方法都不会在状态更改后触发。
componentWillUpdate 已被弃用：reactjs.org/blog/2018/03/27/update-on-async-rendering.html
componentDidUpdate 不会在收到新的 props 时触发，不一定只在状态改变时触发？
componentWillUpdate 已弃用。

【解决方案8】：

我认为你应该在组件生命周期下面使用，就好像你有一个输入属性，更新时需要触发你的组件更新，那么这是最好的地方，因为它会在渲染之前被调用，你甚至可以更新组件要反映在视图上的状态。

componentWillReceiveProps: function(nextProps) {
  this.setState({
    likesIncreasing: nextProps.likeCount > this.props.likeCount
  });
}

【讨论】：

componentWillReceiveProps 已被弃用：reactjs.org/docs/…