react状态机是什么

PHP中文网 • 2025年3月7日 22:46:29 • 编程技术 • 阅读 2

react把组件看成是一个状态机，通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

在具有许多组件的应用程序中，在销毁时释放组件所占用的资源非常重要。

每当 Clock 组件第一次加载到 DOM 中的时候，我们都想生成定时器，这在 React 中被称为挂载。

同样，每当 Clock 生成的这个 DOM 被移除的时候，我们也会想要清除定时器，这在 React 中被称为卸载。

nbsp;html>Hello React!
class Clock extends React.Component {  constructor(props) {    super(props);    this.state = {date: new Date()};  }  componentDidMount() {    this.timerID = setInterval(      () => this.tick(),      1000    );  }  componentWillUnmount() {    clearInterval(this.timerID);  }  tick() {    this.setState({      date: new Date()    });  }  render() {    return (              Hello, world!        
现在是 {this.state.date.toLocaleTimeString()}          );  }}ReactDOM.render(  ,  document.getElementById('example'));

登录后复制

解析：

componentDidMount()与componentWillUnmount()方法被称作生命周期钩子。

在组件输出到 DOM 后会执行componentDidMount()钩子，我们就可以在这个钩子上设置一个定时器。

this.timerID 为定时器的 ID，我们可以在 componentWillUnmount() 钩子中卸载定时器。

当被传递给 ReactDOM.render() 时，React 调用 Clock 组件的构造函数。由于 Clock 需要显示当前时间，所以使用包含当前时间的对象来初始化 this.state 。我们稍后会更新此状态。

React 然后调用 Clock 组件的render()方法。这是 React 了解屏幕上应该显示什么内容，然后 React 更新 DOM 以匹配 Clock 的渲染输出。

当 Clock 的输出插入到 DOM 中时，React 调用 componentDidMount() 生命周期钩子。在其中，Clock 组件要求浏览器设置一个定时器，每秒钟调用一次 tick()。

浏览器每秒钟调用tick()方法。在其中，Clock 组件通过使用包含当前时间的对象调用 setState() 来调度UI更新。通过调用 setState() ，React 知道状态已经改变，并再次调用 render() 方法来确定屏幕上应当显示什么。这一次，render() 方法中的 this.state.date将不同，所以渲染输出将包含更新的时间，并相应地更新 DOM。

一旦 Clock 组件被从 DOM 中移除，React 会调用 componentWillUnmount() 这个钩子函数，定时器也就会被清除。