react笔记（七）—— 组件生命周期

小徐今天学习了吗
104 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情

前言

大家好呀，我是L同学。在上篇文章react笔记（六）—— 组件通讯子传父中，我们学习了组件通讯子传父、兄弟组件组件通讯、使用context实现跨级组件通讯、props校验等相关知识点。在本篇文章中，我们将学习到props默认值、组件生命周期、setState更新数据等相关知识点。

props默认值

通过defaultProps可以给组件的props设置默认值，在未传入props的时候生效。

function App(props) {
    return (
        <div>
            此处展示props的默认值：{props.pageSize}
        </div>
    )
}
// 设置默认值
App.defaultProps = {
	pageSize: 10
}
// 不传入pageSize属性
<App />

组件生命周期

生命周期是一个事物从创建到最后消亡经历的整个过程。组件的生命周期是组件从被创建到挂载到页面中运行，再到组件不用时卸载的过程。组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因等。钩子函数的作用是为开发人员在不同阶段操作组件提供了时机。只有 类组件 才有生命周期。

挂载阶段

执行时机：组件创建时（页面加载时）。

执行顺序：constructor() -> render() -> componentDidMount()

钩子 函数触发时机作用
constructor创建组件时，最先执行1. 初始化state 2. 创建Ref等
render每次组件渲染都会触发渲染UI（注意： 不能调用setState() ）
componentDidMount组件挂载（完成DOM渲染）后1. 发送网络请求 2.DOM操作

更新阶段

执行时机：1. setState() 2. forceUpdate() 3. 组件接收到新的props

说明：以上三者任意一种变化，组件就会重新渲染

执行顺序：render() -> componentDidUpDate()

钩子函数触发时机作用
render每次组件渲染都会触发渲染UI（与 挂载阶段 是同一个render）
componentDidUpdate组件更新（完成DOM渲染）后DOM操作，可以获取到更新后的DOM内容，不要调用setState

卸载阶段

执行时机：组件从页面中消失。

钩子函数触发时机作用
componentWillUnmount组件卸载（从页面中消失）执行清理工作（比如：清理定时器等）

setState更新数据的说明

setState是"异步"的。当调用 setState 的时候，React.js 并不会马上修改 state，而是把这个对象放到一个更新队列里面。稍后才会从队列当中把新的状态提取出来合并到 state 当中，然后再触发组件更新。可以多次调用 setState() ，只会触发一次重新渲染。

this.state = { count: 1 }
this.setState({
	count: this.state.count + 1
})
console.log(this.state.count) // 1

在使用 React.js 的时候，并不需要担心多次进行 setState 会带来性能问题。

setState推荐语法

setState箭头函数的语法，解决多次调用依赖的问题。推荐使用 setState((preState) => {}) 语法。参数preState: React.js 会把上一个 setState 的结果传入这个函数。

this.setState((preState) => {
    return {
    	count: preState.count + 1
    }
})
console.log(this.state.count) // 1

这种语法依旧是异步的，但是state可以获取到最新的状态，适用于需要调用多次setState

setState第二个参数

  • 场景：在状态更新（页面完成重新渲染）后立即执行某个操作
  • 语法：setState(updater[, callback])
this.setState(
	(state) => ({}),
	() => {console.log('这个回调函数会在状态更新后立即执行')}
)

setState同步or异步

setState本身并不是一个异步方法，其之所以会表现出一种异步的形式，是因为react框架本身的一个性能优化机制。React会将多个setState的调用合并为一个来执行，也就是说，当执行setState的时候，state中的数据并不会马上更新。setState如果是在react的生命周期中或者是事件处理函数中，表现出来是异步的。setState如果是在setTimeout/setInterval或者原生事件中，表现出来是同步的。

setState是同步的方法，但是react为了性能优化，所以setState在react的事件中表现得像异步。

avatar
文章
阅读
粉丝