如何在react.js中监听状态变化？

React.js中与angular的$ watch函数等效的函数是什么？

我想听状态变化并调用类似getSearchResults（）的函数。

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

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

将处理程序从公共父级传递下来（通过props），并让它们更新父级的状态，从而导致父级以下的层次结构被重新呈现。
另外，为避免处理程序在层次结构中层叠泛滥，您应该查看流通模式，该模式将状态移入数据存储区并允许组件监视其变化。该Fluxxor插件是管理这个非常有用的。

状态更改时，将调用以下生命周期方法。您可以使用提供的参数和当前状态来确定是否有意义的更改。

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

我认为您应该在“组件生命周期”下使用，就像您有一个输入属性，该属性在更新时需要触发您的组件更新一样，因此这是最好的选择，因为它将在渲染之前被调用，甚至可以将组件状态更新为反映在视图上。

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

从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)} />

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

已经有一段时间了，但是供以后参考：可以使用shouldComponentUpdate（）方法。

更新可能是由于道具或状态的更改引起的。重新渲染组件时，将按以下顺序调用这些方法：

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

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

在2020年，您可以使用useEffect钩子监听状态变化，如下所示

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

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

本文地址：http://javascript.askforanswer.com/ruhezaireact-jszhongjiantingzhuangtaibianhua.html
文章标签：javascript , reactjs
版权声明：本文为原创文章，版权归 javascript 所有，欢迎分享本文，转载请保留出处！

文件下载