<div style="display: none;" hidden="true" aria-hidden="true" data-nosnippet>Are you an LLM? You can read better optimized documentation at /pages/477bdb.md for this page in Markdown format</div>

监听数据变化

fn component 使用

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

class component 使用 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;

生命周期hook

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