挂载(Mounting)阶段
- constructor()
- 这是组件的构造函数,在组件实例被创建时首先调用。它主要用于初始化组件的状态(
this.state
)和绑定事件处理函数。例如:
在这里,通过class MyComponent extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; this.handleClick = this.handleClick.bind(this); } // 其他方法 }
super(props)
调用父类(React.Component
)的构造函数来传递props
,然后初始化count
状态为0,并绑定handleClick
方法。
- 这是组件的构造函数,在组件实例被创建时首先调用。它主要用于初始化组件的状态(
- componentWillMount()(已废弃)
- 在组件挂载之前调用,在这个方法中可以进行一些状态的设置或者其他准备工作。不过,这个方法在React 17版本中已经被标记为废弃,因为它可能会导致一些难以预测的副作用。
- render()
- 这是React组件中最重要的方法之一。它必须返回一个React元素,这个元素可以是原生的DOM元素(如
<div>
、<p>
等),也可以是自定义的React组件。例如:
这里返回了一个包含段落和按钮的render() { return ( <div> <p>Count: { this.state.count}</p> <button onClick={ this.handleClick}>Increment</button> </div> ); }
div
元素,段落显示count
状态的值,按钮的点击事件绑定到handleClick
方法。
- 这是React组件中最重要的方法之一。它必须返回一个React元素,这个元素可以是原生的DOM元素(如
- componentDidMount()
- 在组件挂载(插入DOM树)完成后立即调用。这个阶段通常用于执行一些需要访问DOM节点的操作,比如发起网络请求、添加事件监听器等。例如:
这段代码在组件挂载后发起一个网络请求,获取数据后更新组件的状态。componentDidMount() { fetch('https://example.com/api/data') .then(response => response.json()) .then(data => this.setState({ data })); }
- 在组件挂载(插入DOM树)完成后立即调用。这个阶段通常用于执行一些需要访问DOM节点的操作,比如发起网络请求、添加事件监听器等。例如:
- constructor()
更新(Updating)阶段
- componentWillReceiveProps(nextProps)(已废弃)
- 在组件接收到新的
props
之前调用。这个方法用于比较新的props
和旧的props
,并根据变化进行相应的状态更新。不过,这个方法在React 17版本中也已经被标记为废弃。
- 在组件接收到新的
- shouldComponentUpdate(nextProps, nextState)
- 在组件接收到新的
props
或者状态(state
)更新之前调用。这个方法返回一个布尔值,用于决定组件是否需要重新渲染。如果返回false
,则组件不会重新渲染,这可以用于性能优化。例如:
这里比较新的shouldComponentUpdate(nextProps, nextState) { return nextState.count!== this.state.count; }
count
状态和旧的count
状态,如果不相等,则返回true
,允许组件重新渲染。
- 在组件接收到新的
- componentWillUpdate(nextProps, nextState)(已废弃)
- 在组件确定要更新之后,在
render
方法之前调用。这个方法主要用于在更新前进行一些准备工作,但是它也可能会导致一些副作用,并且在React 17版本中被标记为废弃。
- 在组件确定要更新之后,在
- render()
- 与挂载阶段的
render
方法功能相同,用于返回一个React元素来更新DOM。每次组件状态或者props
发生变化并且shouldComponentUpdate
返回true
时,这个方法都会被调用。
- 与挂载阶段的
- componentDidUpdate(prevProps, prevState)
- 在组件更新完成后调用。这个方法可以用于在更新后执行一些操作,比如根据更新后的状态操作DOM或者发起新的网络请求。例如:
这里比较更新后的componentDidUpdate(prevProps, prevState) { if (this.state.count > prevState.count) { console.log('Count has increased.'); } }
count
状态和之前的count
状态,如果增加了,则在控制台输出相应的信息。
- 在组件更新完成后调用。这个方法可以用于在更新后执行一些操作,比如根据更新后的状态操作DOM或者发起新的网络请求。例如:
- componentWillReceiveProps(nextProps)(已废弃)
卸载(Unmounting)阶段
- componentWillUnmount()
- 在组件即将从DOM中卸载时调用。这个方法用于清理组件在挂载和更新阶段添加的一些资源,比如清除定时器、取消网络请求、移除事件监听器等。例如:
如果在组件中设置了一个定时器componentWillUnmount() { clearInterval(this.timer); }
this.timer
,在组件卸载时需要通过clearInterval
来清除这个定时器,以防止内存泄漏等问题。
- 在组件即将从DOM中卸载时调用。这个方法用于清理组件在挂载和更新阶段添加的一些资源,比如清除定时器、取消网络请求、移除事件监听器等。例如:
- componentWillUnmount()