React文档 state and lifecycle
状态和生命周期
这篇介绍 React 组件中状态和声明周期的概念。详情能够查看API参考 。javascript
思考前一部分中时钟的例子。渲染元素中，咱们仅学习了一种更新 UI 的方式。调用 ReactDOM.render() 改变渲染后的输出。html
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(
element,
document.getElementById('root')
);
}
在线尝试 java
这部分，咱们学习如何编写真正可复用的封装 Clock 组件。 它会设置本身的计时器每秒更新本身。react
咱们从封装 时钟的外层开始：segmentfault
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 应该是一个 Clock 的细节实现。浏览器
理想状况下咱们写一次让 Clock 更新自身：异步
ReactDOM.render(
<Clock />,
document.getElementById('root')
);
实现这一需求咱们须要给 Clock 组件添加 "state".函数
State 很相似 props, 不一样的是它彻底私有由组件控制。post
函数转化为类
转化一个相似 Clock 的函数组件为类组件须要五步：
- 建立一个 [ES6标准的类]()， 名称不变，继承 React.Component.
- 重写 render()方法。
- 函数的祖逖移到 render() 方法中。
- render() 方法体重使用 this.props替换 props 。
- 删除空的函数声明。
class Clock extends React.Component {
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.props.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
[在线尝试]()
函数组件定义的 Clock 如今由类组件定义。
render() 方法会在每次更新时调用，可是只要咱们渲染 <Clock /> 到一样的 DOM 节点，就会使用 Clock 类的单一实例。这让咱们可使用如 local state 和 lifecycle 钩子等额外的特性。
为类添加本地状态
三步把 date 从 props 移动到 state:
- 在 render() 方法中使用 this.state.date 替换 this.props.date ：
class Clock extends React.Component {
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
- 添加一个[类构造器]()来分管 this.state 的初始化：
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
注意咱们传递 props 到基础构造器：
construct(props) {
super(props);
this.state = {date: new Date()};
}
类组件老是经过 props 调用基础构造器。
- 移除<Clock /> 元素中的 date props ：
ReactDOM.render(
<Clock />,
document.getElementById('root')
);
待会咱们在将计时器代码回写到 组件自己。
结果以下：
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('root')
);
[在线尝试]()
下面，咱们编写 Clock 设置他本身的计时器每秒更新自身。
为类添加声明周期方法
多个组件的应用中，当组件销毁时释放组件占用的资源很是重要。
咱们想 [设置一个计时器]() 不管什么时候 Clock 第一次被渲染到 DOM. React 中称之为 ”mounting".
咱们也想 [清楚一个计时器]() 不管什么时候 Clock 被DOM 移除。 React 中称之为 “unmounting".
当组件 mounts 和 unmounts 时咱们能够在组件类声明特殊的方法来运行。
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
componentDidMount() {
}
componentWillMount() {
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
这些方法称为 "lifecycle hooks(生命周期钩子)".
componentDidMount() 钩子在组件输出渲染至DOM 后运行。这个位置很适合创建一个计时器：
componentDidMount() {
this.timerID = setInterval(() => this.tick(), 1000);
}
注意咱们如何正确的将 计时器 ID 保存到 this.
当 React 设置 this.props this.state 有了特别的含义，你能够随意为类手动添加额外字段，若是你须要保存一些不参与数据流（好比 timerID）。
咱们在 componentWillUnmount() 生命周期钩子函数中去掉 计时器。
componentWillUnmount() {
clearInterval(this.timerID);
}
最后咱们，实现一个称为 tick() 的方法实现 Clock 组件每秒运行。
这会用到 this.setState() 来调度更新组件的本地状态：
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>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('root')
);
如今时钟按秒运行。
快速的回顾下发生了什么还有方法调用顺序：
- 当 <Clock /> 传给 ReactDOM.render(), React 调用Clock 组件的构造器。从 Clock 须要显示当前时间，它经过包含当前时间的对象初始化 this.state。稍后更新 state.
- React 调用 Clock 组件的 render() 方法，知道应该在屏幕上显示什么。React 以后更新 DOM 来匹配 Clock 的渲染后输出。
- 当 Clock 的输出被插入 DOM, React 调用 componentDidMount()生命周期钩子。在方法内部，Clock 组件让浏览器设置一个计时器按秒来调用组件的 tick()方法。
- 浏览器按秒调用 tick() 方法。其中，Clock组件经过包含当前时间的对象调用setState() 来调度 UI 更新。React经过 setState() 犯法调用知晓组件状态发生改变，随后调用 render() 方法再次知晓屏幕上应该显示什么。这时，render() 方法中 this.state.date 会发生改变，所以渲染结果将会包含更新后的时间。React 相应的更新 DOM.
- 若是 Clock 组件一旦移除DOM, React 调用 componentWillUnmount() 生命周期钩子，而后计时器中止。
正确的更新 State
关于setState() 的三个须知：
不要直接修改修改 State
例如，这样不会 从新渲染一个组件：
// Wrong this.state.comment = 'Hello';
应该使用 setState():
// Correct
this.setState({comment: 'Hello'});
构造器是惟一可为 this.state 赋值的地方。
State 更新可能同步
React 为了性能可能批量屡次 调用 setState() 一个单独的更新。
由于 this.props 和 this.state 可能异步更新，不该该依赖它们的值来计算下一个状态。
例如，以下代码可能更新计数器失败：
// Wrong
this.setState({
counter: this.state.counter + this.props.increment,
});
修复这个问题，使用 setState() 的第二种形式，接受函数而不是一个对象。这个函数接受以前的 state 做为第一个参数， 当时间更新时 props 做为第二个参数。
// Correct
this.setState((prevState, props) => ({
counter: prevState.counter + props.increment
}));
上面的例子中咱们使用了 [箭头函数]()，但常规函数也是能够的。
// Correnct
this.setState(function(prevState, props) {
return {
counter: prevState.counter + props.increment
};
});
状态更新合并
当调用 setState(), React会合并你提供给当前状态的对象。
例如， 你的状态可能包含多个独立的变量：
constructor(props) {
super(props);
this.state = {
posts: [],
comments: []
};
}
那么你能够经过分别调用 setState()独立更新他们:
componentDidMount() {
fetchPosts().then(response => {
this.setState({
posts: response.posts
});
});
fetchComments().then(response => {
this.setState({comments: response.comments
});
});
}
合并是浅的， 因此 this.setState({comments}) 保留了 this.state.posts 的完整，却彻底替换了 this.state.comments.
数据流向下
不管子组件仍是父组件都没法知道一个特定的主键是有状态仍是无状态，并且他们也不该当关心它是用函数方式仍是类方式定义。
这是为何 state 常常被成为本地或者被封装的。它对任何组件不可达，不管是组件拥有它或者是其组成部分。
一个组件可能选择传递他的 state 向下做为 props 给它的子组件：
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
这对用户自定义组件也一样有效：
<FormattedDate date={this.state.date} />
FormattedDate 组件接受它 props 中的 date，并不知道他来自 Clock的 state,仍是来自 Clock 的 props, 或者是手动输入：
function FormattedDate(props) {
return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
}
这个一般称为 "top-down(自上而下)" 或者 "unidirectional(单向)" 数据流。任何 state 总数被特定的组件所拥有，任何经过 state 传递的数据或 UI 都只能影响树形结构的下方组件。
你能够家乡组件树是一个 props 瀑布，每一个组件的状态就像一个额外的水源在随机点加入它同时向下流。
为展现全部组件真正独立，咱们建立一个 App 组件 渲染三个 <Clock />:
function App() {
return (
<div> <Clock /> <Clock /> <Clock /> </div> );
}
ReactDOM.render() {
<App />,
document.getElementById('root')
[在线尝试]() 每一个 **Clock** 设置他本身的计时器独立更新他们。 React 应用中，不管一个组件是有状态仍是无状态都被当作一个组件可随时间改变的实现细节。 你可在有状态组件中使用无状态组件，反之亦然。
- 1. React （2） -- State and Lifecycle
- 2. 【译】State and Lifecycle (State和生命周期)
- 3. 前端框架---React【state and lifecycle hooks】
- 4. react - state and props
- 5. React文档 Components and Props
- 6. [React] React Fundamentals: Component Lifecycle - Updating
- 7. React.js Tutorial: React Component Lifecycle
- 8. React Component Lifecycle
- 9. React 快速上手 - 04 基础特性 JSX、Props、State、Lifecycle、Event、Style
- 10. Processes and Application Lifecycle
- 更多相关文章...
- • WSDL 文档 - WSDL 教程
- • XSL-FO 文档 - XSL-FO 教程
- • RxJava操作符（七）Conditional and Boolean
- • Scala 中文乱码解决
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 安装cuda+cuDNN
- 2. GitHub的使用说明
- 3. phpDocumentor使用教程【安装PHPDocumentor】
- 4. yarn run build报错Component is not found in path “npm/taro-ui/dist/weapp/components/rate/index“
- 5. 精讲Haproxy搭建Web集群
- 6. 安全测试基础之MySQL
- 7. C/C++编程笔记：C语言中的复杂声明分析，用实例带你完全读懂
- 8. Python3教程(1)----搭建Python环境
- 9. 李宏毅机器学习课程笔记2：Classification、Logistic Regression、Brief Introduction of Deep Learning
- 10. 阿里云ECS配置速记
- 1. React （2） -- State and Lifecycle
- 2. 【译】State and Lifecycle (State和生命周期)
- 3. 前端框架---React【state and lifecycle hooks】
- 4. react - state and props
- 5. React文档 Components and Props
- 6. [React] React Fundamentals: Component Lifecycle - Updating
- 7. React.js Tutorial: React Component Lifecycle
- 8. React Component Lifecycle
- 9. React 快速上手 - 04 基础特性 JSX、Props、State、Lifecycle、Event、Style
- 10. Processes and Application Lifecycle