State&生命周期学习

到目前为止我们只学习了一种方法来更新UI。
我们调用 ReactDOM.render()方法来改变输出。
这一节，我们在前面的基础上，如何将之前的例子变成可重用的组件。
先回顾一下之前的方法：

function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

理想情况下，Clock更细自己的UI应该是自己内部的事情，他能够自己更新自己的UI。
为了实现这个需求，我们需要为Clock组件添加状态
状态与属性十分相似，但是状态是私有的，完全受控于当前组件。

把函数变成类

1.创建一个名称扩展为 React.Component的ES6类
2.创建一个叫做render()的空方法
3.将函数体移动到 render()方法中
4.在 render()方法中，使用 this.props替换 props

export class Tick extends Component {
  constructor(props){
    super(props);
    this.state = {
      date:new Date()
    }
  }
  render() {
    return (
      <div>
        <h1>Hello，{this.props.name}</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}</h2>
      </div>
    )
  }
}

这里我是在自己本地运行的一个react的环境，在对应的文件写了一个组件。你们也可以在自己本地安装环境，这样学习起来也比较方便：

npm install -g create-react-app
create-react-app my-app

cd my-app
npm start

然后就可以开始了。
现在我们定义了一个类，使用类就允许我们使用其它特性，例如局部状态、生命周期钩子。
代码中，我们是使用构造函数的方法来初始化组件的状态以及传递props的。
建议大家在学习前还是了解一下类的概念比较容易理解。

接下来我们为组件添加定时器，来更新时间。

将生命周期函数添加到类中

在具有许多组件的应用程序中，在销毁时释放组件所占用的资源非常重要。
每当组件第一次加载到DOM中的时候，这在React中被称为挂载
同样，每当组件生成的这个DOM被移除的时，这在React中被称为卸载。
我们可以在组件类上声明特殊的方法，当组件挂载或卸载时，来运行一些代码：

export class Tick extends Component {
  constructor(props){
    super(props);
    this.state = {
      date:new Date()
    }
  }
  componentDidMount() {
   
  }
  componentWillUnmount() {
   
  }
  render() {
    return (
      <div>
        <h1>Hello，{this.props.name}</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}</h2>
      </div>
    )
  }
}

这些方法被称作生命周期钩子。
当组件输出到 DOM 后会执行 componentDidMount()钩子，这是一个建立定时器的好地方：

componentDidMount() {
    this.timerId = setInterval(
      () => this.tick(),
      1000
    )
  }

注意我们如何在 this 中保存定时器ID。
虽然 this.props 由React本身设置以及this.state 具有特殊的含义，但如果需要存储不用于视觉输出的东西，则可以手动向类中添加其他字段。
如果你不在 render() 中使用某些东西，它就不应该在状态中。
我们将在 componentWillUnmount()生命周期钩子中卸载计时器：

componentWillUnmount() {
    clearInterval(this.timerID);
  }

更新组件局部状态

我们使用用 this.setState()来更新组件局部状态：

tick() {
    this.setState({
      date: new Date()
    })
  }

最后，我们实现了每秒钟执行的 tick() 方法。然后组件每一秒就会更新自己的状态。现在，现在时钟每秒钟都会执行。
关于 setState()：

• 不要直接更新状态，应当使用 setState()
• 构造函数是唯一能够初始化 this.state 的地方。
• 状态更新合并，这里的合并是浅合并，当你更新一个状态时，其余的状态保持不变。

数据单向流动

父组件或子组件都不能知道某个组件是有状态还是无状态，并且它们不应该关心某组件是被定义为一个函数还是一个类。
这就是为什么状态通常被称为局部或封装。 除了拥有并设置它的组件外，其它组件不可访问。
组件可以选择将其状态作为属性传递给其子组件,这也适用于用户定义的组件：

<FormattedDate date={this.state.date} />

FormattedDate 组件将在其属性中接收到 date 值，并且不知道它是来自父组件 状态、还是来自 父组件的属性、亦或手工输入：

function FormattedDate(props) {
  return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
}

这通常被称为自顶向下或单向数据流。
为了表明所有组件都是真正隔离的，我们可以创建一个 App 组件，它渲染三个Tick：

export class App extends Component {
  render() {
    return (
      <div className="App">
        <Tick name="Zhang Yanwei"/>
        <Tick name="Zhang"/>
        <Tick name="Yanwei"/>
      </div>
    );
  }
}

每个 Tick建立自己的定时器并且独立更新。

效果图