数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学React.js 组件生命周期 - 挂载阶段
每个有状态的（基于类的）组件都会经历四种生命周期阶段。
- 挂载或创建
- 更新
- 卸载或销毁
- 错误处理阶段
React.js 组件生命周期 - 挂载阶段
在创建生命周期期间执行的方法如下：
- 构造函数 (constructor)
- componentWillMount（仅在 17 版本之前可用）
- render
- componentDidMount
constructor ()
- 这是一个 ES6 特性，而不是 React 提供的方法。
- React 使用构造函数将 props 传递给从 React 库继承的父组件。
constructor(props){
super( props );
}- 将 props 传递给父组件有助于我们在组件中使用**this.props**。
我们可以在构造函数中初始化组件的状态。重要的是，我们不应该在构造函数中使用 setState 方法。因为 setState 的设计目的是更新状态，而不是创建状态。
在构造函数中使用 setState 可能会导致组件不可预测或无限次重新渲染。
- 示例用法：
constructor(props){
super(props);
this.state = {
test: ‘example’
}
}- 应避免在构造函数中进行诸如调用 Web API 之类的副作用。因为 Web API 调用需要时间才能返回结果，在此期间构造函数方法将完成其执行。
- 方法绑定也可以在构造函数中完成，例如：this.handleNewUser = this.handleNewUser.bind(this);
componentWillMount
- 我们可以在此处更新状态。
- 可以进行最后一刻的优化
- 此方法很少使用，因为它位于构造函数和 render 之间。组件生命周期的这个时间点所需的一切，都已经由构造函数完成或将由 render 方法完成。
- 可以在这里建立日志记录或数据库连接。
- 这是一个遗留方法，React 本身建议从 17 版本开始在新版本中不要使用此方法。
render
- 执行 render 方法使 React 了解需要更新实际 DOM 的内容。
- React 保留原始 DOM 的副本，我们称之为虚拟 DOM。
- 更改发生在虚拟 DOM 上，最后，React 将虚拟 DOM 与原始 DOM 进行比较以更新后者。
- 此方法构建并准备返回给 DOM 的 JSX 代码。
- 在 render 方法内部，我们可以使用子组件的 JSX 代码。
- 因此，子组件的生命周期方法将在此时间点运行。
componentDidMount
- 此方法的执行意味着组件已成功挂载或创建在真实的 DOM 上。
- 在这里，我们可以执行副作用，例如使用计时器、调用 Web API、添加事件监听器。
- 此方法在有状态组件的生命周期中只调用一次。
- 在此方法中使用 setState 可以再次触发 render 以更新 DOM。
- 我们能够在此方法内执行副作用，因为它只执行一次，因此如果我们使用 setState 更新状态，就不会出现无限循环。
- 如果我们想操作 DOM 节点，那么此方法是执行此操作的最佳位置。
下面显示了调用 Web API 的示例
如果您的系统上安装了最新的 node.js，则可以使用以下命令使用 cmd 创建 React 项目
npx create-react-app componentdidmount-example
create-react-app 后面的项目名称是用户指定的。由于 npm 命名约定，项目名称中不允许使用大写字母。
我们将使用 Axios 进行 Web API 调用。要安装它，请使用以下命令
npm install –save axios
为了演示此示例，我们使用了 jsonplaceholder 提供的开源虚拟 API： https://jsonplaceholder.typicode.com/users
App.js 文件
import React, { Component } from 'react';
import axios from 'axios'
import './App.css';
class App extends Component {
constructor(props){
super(props);
this.state={
users:{},
isUsersLoaded:false
}
}
componentDidMount(){
axios.get('https://jsonplaceholder.typicode.com/users')
.then(result=>{
console.log(result);
this.setState({users:result.data,isUsersLoaded:true});
});
}
render(){
if(!this.state.isUsersLoaded){
return <div>Loading...</div>
}
return (
<ul>
{this.state.users.map(user => (
<li key={user.id}>
{user.name}
</li>
))}
</ul>
);
}
}
export default App;我们使用构造函数初始化我们的用户和 isUserLoaded 标志。
ComponentDidMount 生命周期用于从服务器获取用户，并在我们异步接收用户列表后更新列表。
在 render 生命周期方法中，我们在收到用户列表之前显示加载文本。
浏览器上的输出如下所示：
更新于： 2019-09-04
浏览量：302
广告