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

2020/11/13 22:22 · javascript ·  · 0评论

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

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

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

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

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

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

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

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

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

从2019年使用useStateuseEffect 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 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!