Hello React day3

学习React基础的第三天

Day three

1.老版本生命周期

1.初始化阶段：由ReactDOM.render(组件，node)触发—-初次渲染

• constructor()
• componentWillMount()
• render()
• componentDidMount

2.更新阶段：由组件内部this.setState()或父组件render触发（还有ReactDOM.forceUpdate()强制更新，但是不常用）

• shouldComponentUpdate()
• componentWillUpdate()
• render()
• componentDidUpdate()

3.卸载阶段（由ReactDOM.unmountComponentAtNode()触发）

• componentWillUnmount()

注意：还有一个componentWillReceiveProps() //传入一个new props才会被触发

2.新版本生命周期

1.初始化阶段 由ReactDOM.render（）触发—初次渲染

• constructor()
• getDerivedStateFromProps(props,state) //使用情况当state值完全和props对应的时候（接收两个参数props，state）
• render（）
• componentDidMount（）

2.更新阶段：由组件内部this.setState()或父组件更新render触发

• **getDerivedStateFromProps(props,state) ** //使用的要当静态方法来用 前面加 static
• shouldComponentUpdate()
• getSnapshotBeforeUpdate() //可以return 快照值 snapshotValue接收
• componentDidUpdate(refvProps,refvState,snapshotValue)

3.卸载组件 : 由ReactDOM.unmountComponentAtNode()触发

• componentWillUnmount()

3.重要的钩子

• render() //初始化渲染或更新渲染用
• componentDidMount() // 开启监听发送Ajax请求，订阅消息
• componentWillUnmount() // 做一些收尾工作，清除定时器

4.18版本中即将废弃的钩子

• componentWillMount()
• componentWillReceiveProps()
• componentWillUpdate()

注意：在新版本使用要加UNSAFE_前缀才能使用（之后可能就废弃啦）不然会报警告

5.虚拟DOM与DOM diffing（diff）

• 虚拟DOM中key的作用：

1. 简单地说：key是虚拟DOM对象的标识，在更新显示时key起着及其重要的作用。
2. 详细的说：“当状态中的数据发生变化时，React会根据【新数据】生成【新得虚拟DOM】”

​ 随后React进行【新的虚拟DOM】与【旧的虚拟DOM】做diff比较，比较规则如下：

​ a.旧虚拟DOM中找到了与新虚拟DOM相同的key

​ （1）若虚拟DOM内容没有改变，直接使用之前的真实DOM

​ （2）若虚拟DOM中内容变了，则生成新得真实DOM，随后替换掉页面中之前的真实dom

​ b.旧的虚拟DOM中未找到与新得虚拟DOM相同的key

​ （1）根据新得数据创建新得真实DOM，随后渲染到页面上

• 用index作为key可能会引发的问题

1. 若对数组进行：逆序添加、逆序删除等破坏顺序的操作：会产生没有必要的真实DOM更新 ==》界面效果没有问题，但是效率太低
2. 如果结构中还存在输入类的DOM ： 会产生错误的DOM更新 ==》界面有问题
3. 注意：如果不存在对数据的逆序添加、删除等操作的时候 ==》 仅仅用于渲染列表用于展示，使用index作为key是没有问题的

• 开发中何如选择key？

1. 最好还是使用每一条数据的唯一标识作为key
2. 如果确定只是简单的展示数据，用index也是可以的

​