React学习总结-----第二章

第二章 React面向组件编程

2.1 基本理解和使用

2.1.1 使用React开发者工具调试

2.1.2 注意

1. 组件名必须首字母大写
2. 虚拟DOM元素只能有一个根元素
3. 虚拟DOM元素必须有结束标签

2.1.3 渲染类组件标签的基本流程

1. React内部会创建组件实例对象
2. 调用render()得到虚拟DOM，并解析为真实DOM
3. 插入到指定的页面元素内部

2.2 组件三大核心属性 1：state

2.2.1 理解

1. state是组件对象最重要的属性，值是对象(可以包含多个key-value的组合)
2. 组件被称为“状态机”，通过更新组件的state来更新对应的页面显示(重新渲染组件)

2.2.2 强烈注意

1. 组件中render方法中的this为组件实例对象
2. 组件自定义方法中的this为undefined，如何解决？（箭头函数）
3. 状态数据，不能直接修改或者更新

2.3 组件三大核心属性 2：props

2.3.1 理解

1. 每个组件对象都会有props属性
2. 组件标签的所有属性都在props中

2.3.2 作用

1. 通过标签属性从组件外向组件内传递变化的数据
2. 注意：组件内部不要修改props数据

2.4 组件三大核心属性 3：refs与事件处理

2.4.1 理解

        给组件内的标签定义ref属性来标识自己

2.4.2 编码

        1.字符串形式的ref         =>        <input ref="input1"/>

        2.回调形式的ref         =>        <input ref={(c)=>{this.input1 = c}}

        3.createRef创建ref容器 

                myRef = React.createRef() 

                <input ref={this.myRef}/>

2.4.3 事件处理

1. 通过onXxx属性指定事件处理函数(注意大小写)
2. 通过event.target得到发生事件的DOM元素对象

2.5 收集表单数据

2.5.1 理解

包含表单组件的组件分类

1. 受控组件
2. 非受控组件

2.6 组件的生命周期

2.6.1 理解

1. 组件从创建到死亡会经历一些特定的阶段
2. React组件中包含一系列钩子函数，会在特定的时刻调用
3. 我们在定义组件时候，会在特定的生命周期回调函数中，坐特定的工作

2.6.2 生命周期流程

        

生命周期的三个阶段

        1.初始化阶段：由ReactDOM.render()触发 ----- 初次渲染

                1.constructor()

                2.getDerivedStateFromProps

                3.render()

                4.componentDidMount()

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

                1.getDerivedStateFromProps

                2.shouldComponentUpdate()

                3.render()

                4.getSnapshotBeforeUpdate

                5.componentDidUpdate()

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

                1.componentWillUnmount()

2.6.3 重要的钩子

1. render：初始化渲染或更新渲染调用
2. componentDidMount：开启监听，发送ajax请求
3. componentWillUnmount：做一些收尾工作，如：清楚定时器

2.7 虚拟DOM与DOM Diffing算法