Question

React.js中有角度的$ watch函数等价物是什么？

我想听取状态更改并调用类似getSearchResults（）的函数。

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

Answer 1

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

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

Answer 2

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

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

Answer 3

我还没有使用过Angular，但是阅读上面的链接后，您似乎正在尝试编写一些您不需要处理的内容。您在React组件层次结构中对状态进行了更改（通过this.setState（）），React将使您的组件重新呈现（有效地＆＃39;监听＆＃39;进行更改）。如果你想“听”＆＃39;从层次结构中的另一个组件，您有两个选项：

从普通父级传递处理程序（通过道具）并让它们更新父级状态，从而重新呈现父级下面的层次结构。
或者，为了避免层次结构中的处理程序爆炸，您应该查看flux pattern，它会将您的状态移动到数据存储中，并允许组件监视它们的更改。 Fluxxor plugin对于管理此功能非常有用。

Answer 4

在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 5

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

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

Answer 6

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

Answer 7

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

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

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

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

Answer 8

自从2019年带有useState和useEffect钩子的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)} />

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

8 个答案: