react 类似vue中watch这样的api

如何你用的是function component,useEffect可以解决。

useEffect(() => {
    console.log('counter发生了变化,最新值:', counter);
}, [counter]);

不过如果你用的是Class组件,可以写一个get() ,在get中执行相应的操作:

class Test extends Component {
  state = { counter: 0 };

  get newCounter(): number {
    const { counter } = this.state;
    console.log(`counter changed, new value: ${counter}`);
    return counter;
  }

  handleClick = (): void => {
    this.setState({ counter: this.state.counter + 1 });
  }

  render(): JSX.Element {
    return (<div>
      <p>{this.newCounter}</p>
      <Button onClick={this.handleClick.bind(this)}>click + 1</Button>
    </div>);
  }
}

export default Test;
···
上次更新:
作者: ganfengchi