react 入坑笔记（二） - State

React State

一、 state

　　大致思想：在 react 中，每个组件都是一个状态机，通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

　　

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

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

　　以上代码，实现了加载页面时获取并显示时间的功能。

class Clock extends React.Component {
  constructor(props) {           // 构造器
    super(props);
    this.state = {date: new Date()};  // state 状态
  }

  // 生命周期钩子函数
  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  // 生命周期钩子函数
  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  // tick 方法，在这里可以改变 state
  tick() {
    this.setState({
      date: new Date()
    });
  }

  // 组件渲染函数， jsx
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

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

　　以上代码，实现了每秒更新页面上时间的功能。

　　执行顺序如下：

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

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

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

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

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

二、数据自顶向下流动(自父到子到孙)

　　组件中 state 属性只能由拥有和设置它的组件来访问，因此，状态通常被称之为局部或者封装。

function FormattedDate(props) {
  return <h2>现在是 {props.date.toLocaleTimeString()}.</h2>;
}

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 (
      <div>
        <h1>Hello, world!</h1>
        <FormattedDate date={this.state.date} />
      </div>
    );
  }
}

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

　　以上代码中，将 state 中的数据传递给子组件 FormattedDate 中，而子组件不需要知道数据是来源于父组件的 state 状态 还是属性亦或是手动输入的。

　　这通常被称为自顶向下或单向数据流。 任何状态始终由某些特定组件所有，并且从该状态导出的任何数据或 UI 只能影响树中下方的组件。

　　为了表明所有组件都是真正隔离的，可以创建一个 App 组件，它渲染三个Clock：

function FormattedDate(props) {
  return <h2>现在是 {props.date.toLocaleTimeString()}.</h2>;
}

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 (
      <div>
        <h1>Hello, world!</h1>
        <FormattedDate date={this.state.date} />
      </div>
    );
  }
}

function App() {
  return (
    <div>
      <Clock />
      <Clock />
      <Clock />
    </div>
  );
}

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

以上实例中每个 Clock 组件都建立了自己的定时器并且独立更新。

总结：

　　1.组件是有状态还是无状态被认为是可能随时间而变化的组件的实现细节。

　　2.可以在有状态组件中使用无状态组件，也可以在无状态组件中使用有状态组件。