二、React 面向组件编程、React 组件三大核心属性、生命周期

一、React 面向组件编程

1.1、函数式组件（用函数定义的组件( 适用于 [ 简单组件 ] 的定义 )）

1.2、类式组件（用类定义的组件( 适用于 [ 复杂组件 ] 的定义 )）

简单组件和复杂组件的区别
简单组件：接收输入的数据并返回需要展示的内容（通过 this.props 访问）。
复杂组件：除了使用外部数据（通过 this.props 访问）以外，组件还可以维护其内部的状态数据（通过 this.state 访问）。当组件的状态数据改变时，组件会再次调用 render() 方法重新渲染对应的标记。

事件绑定

React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同：

React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。

例如，传统的 HTML：

  Activate Lasers

在 React 中略微不同：

  Activate Lasers

---

注意一：React中的事件绑定只需要传参数名就行，一定不能加上()，加上（）的函数相当于函数调用，在创建组件实例的时候就会执行，然后会默认返回一个undefined赋给onClick，当你点击标签的时候由于事件绑定的是undefined，会导致绑定的事件调用不成功

注意二：事件绑定中函数 this 为 undefined问题
原因：
class 中的方法在 class 的原型对象上，供实例使用
而 class 中的方法是作为onclick的回调，所以不是通过实例调用的，是直接调用(直接调用this指向window)
因为 class 中的方法默认开启了局部的严格模式(严格模式禁止 this 指向 window )，所以 方法中的 this 为 undefined

解决方法：
一、强制绑定this: 通过函数对象的bind();
二、箭头函数（常用）

---

一、React 组件三大核心属性

1、组件三大核心属性 state

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

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

需求：点击h1标签切换今天天气炎热凉爽

简写

2、组件三大核心属性 props

2.1、官网定义
组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。

state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据

2.1. 理解
1.每个组件对象都会有props(properties的简写)属性
2.组件标签的所有属性都保存在props中

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

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

理解

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

3.2、编码**

1. 字符串形式的ref

2. 回调形式的ref

  {this.input1 = c}} type="text" />

3. createRef创建ref容器·

myRef = React.createRef() 

ref常用方式

script type="text/babel">
        // 创建类式组件
        class Person extends React.Component {
          render(){
            return (
                

                     {this.input1 = c}} type="text" placehodel="点击展示左侧输入框的数据"/> 
                    点击展示左侧输入框的数据
                
            )
          }
          showData = ()=>{
            console.log(this);
            let { input1 } = this;
            alert(input1.value)
          }
        }
        
        // 渲染组件到页面
        ReactDOM.render(,document.getElementById("app"));
    

事件处理

1.通过onXxx属性指定事件处理函数(注意大小写)
  (1)React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
  (2)React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
2.通过event.target得到发生事件的DOM元素对象

二、React 受控组件和非受控组件

受控组件就是可以被 react 状态（state）控制的组件
在 react 中，Input textarea 等组件默认是非受控组件（输入框内部的值是用户控制，和React无关，无法直接获取到值，需通过 ref 获取）。但是也可以转化成受控组件，就是通过 onChange 事件获取当前输入内容，将当前输入内容保存到组件的 state 属性中，此时就成为受控组件。

非受控组件：输入框内部的值是用户控制，和React无关，无法直接获取到值，需通过 ref 获取

受控组件：通过 onChange 事件获取当前输入内容，将当前输入内容保存到组件的 state 属性中

像上面这种受控组件有点代码冗余，一个输入框我就要调一个方法，如果有多个输入框的值需要保存在state。我们需要通过高阶函数来解决代码冗余

高阶函数:如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。
  1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
  2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。
常见的高阶函数有:Promise、 setTimeout、arr.map()等等

函数的柯里化: -通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。

第一种方式（函数返回一个回调函数：个人建议使用第二种方式）


第二种方式

三、React 生命周期

3.1、生命周期流程图(旧)

image.png

3.2、生命周期的三个阶段（旧）

1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
     1.constructor()
     2.componentWillMount()
     3.render()====> 必须使用的一个
     4.componentDidMount() ====> 常用

componentDidMount：一般在这个钩子中做一些初始化的事，例如:开启定时器、发送网络请求、订阅消息

2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
     1.shouldComponentUpdate()
     2.componentWillUpdate()
     3.render()
     4.componentDidUpdate()
3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
     1.componentWillUnmount() ====> 常用

componentWillUnmount：一般在这个钩子中做一些收尾的事，例如:关闭定时器、取消订阅消息

3.3、生命周期流程图(新)

image.png

3.4、生命周期的三个阶段（新）

1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
   1.constructor()
   2.getDerivedStateFromProps
   3.render()
   4.componentDidMount()

2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
   1.getDerivedStateFromProps
   2.shouldComponentUpdate()
   3.render()
   4.getSnapshotBeforeUpdate
   5.componentDidUpdate()

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

重要的勾子
1.render：初始化渲染或更新渲染调用
2.componentDidMount：开启监听, 发送ajax请求
3.componentWillUnmount：做一些收尾工作, 如: 清理定时器

即将废弃的勾子
1.componentWillMount
2.componentWillReceiveProps
3.componentWillUpdate
现在使用会出现警告，下一个大版本需要加上UNSAFE_前缀才能使用，以后可能会被彻底废弃，不建议使用。

三、虚拟DOM与DOM Diffing算法

image.png