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

Question

在React.js中,angular的$ watch函数等价是多少？

我想监听状态更改并调用类似getSearchResults()的函数.

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

Answer 1

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

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

Answer 2

我没有使用过Angular,但是阅读上面的链接,似乎你正在尝试编写一些你不需要处理的东西.您在React组件层次结构中对状态进行了更改(通过this.setState()),React将使您的组件重新呈现(有效地"监听"更改).如果您想从层次结构中的另一个组件"监听",那么您有两个选择:

1. 从普通父项传递处理程序(通过props)并让它们更新父项的状态,从而导致父项下面的层次结构被重新呈现.
2. 或者,为了避免层次结构中的处理程序爆炸,您应该查看通量模式,它将您的状态移动到数据存储中,并允许组件监视它们的更改.该Fluxxor插件是管理这个非常有用的.

Answer 3

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

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

Answer 4

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

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

Answer 5

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

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

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

Answer 6

如果您使用像 这样的钩子const [ name , setName ] = useState (' ')，您可以尝试以下操作：

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

Answer 7

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