到目前为止我们只学习了一种方法来更新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建立自己的定时器并且独立更新。
效果图
网友评论