React State(状态)

将生命周期方法添加到类中
自顶向下或单向数据流

React笔记

将生命周期方法添加到类中

<body>
<div id="example"></div>
<script type="text/babel">
class MyNameIsStitch 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 (
      <div>
        <h2>你浪费的时间 {this.state.date.toLocaleTimeString()}</h1>
      </div>
    );
  }
}

ReactDOM.render(
  <MyNameIsStitch />,
  document.getElementById('example')
);
</script>
</body>

自顶向下或单向数据流

解析: 所有组件都是真正隔离的

<body>
<div id="example"></div>
<script type="text/babel">
function FormattedDate(props) {
  return <h2>你浪费的时间 {props.date.toLocaleTimeString()}.</h2>;
}

class MyNameIsStitch 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 (
      <div>
        <FormattedDate date={this.state.date} />
      </div>
    );
  }
}

function App() {
  return (
    {/*  创建App 组件 它渲染三个  */}
    <div>
      <MyNameIsStitch />
      <MyNameIsStitch />
      <MyNameIsStitch />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('example'));
</script>

</body>

有状态组件中使用无状态组件也可以在无状态组件中使用有状态组件

作者: 我叫史迪奇
本文来自于: https://sdq3.link/React-State.html博客内容遵循署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议