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 所有,欢迎分享本文,转载请保留出处!
文章标签:javascript , reactjs
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!