高阶组件 （★★★）

目标

知道高阶组件的作用

能够说出高阶的使用步骤

概述

目的：实现状态逻辑复用

采用 包装模式

手机：获取保护功能

手机壳：提供保护功能

高阶组件就相当于手机壳，通过包装组件，增强组件功能

思路分析

高阶组件(HOC、Higher-Order Component) 是一个函数，接收要包装的组件，返回增强后的组件

高阶组件内部创建了一个类组件，在这个类组件中提供复用的状态逻辑代码，通过prop将复用的状态传递给被包装组件WrappedComponent

现.png)]

使用步骤

创建一个函数，名称约定以with开头

指定函数参数，参数应该以大写字母开头

在函数内部创建一个类组件，提供复用的状态逻辑代码，并返回

在该组件中，渲染参数组件，同时将状态通过prop传递给参数组件

调用该高阶组件，传入要增强的组件，通过返回值拿到增强后的组件，并将其渲染到页面

包装函数

// 定义一个函数，在函数内部创建一个相应类组件functionwithMouse(WrappedComponent) {
// 该组件提供复用状态逻辑classMouseextendsReact.Component {
state= {
x: 0,
y: 0        }
// 事件的处理函数handleMouseMove= (e) => {
this.setState({
x: e.clientX,
y: e.clientY            })
        }
// 当组件挂载的时候进行事件绑定componentDidMount() {
window.addEventListener('mousemove', this.handleMouseMove)
        }
// 当组件移除时候解绑事件componentWillUnmount() {
window.removeEventListener('mousemove', this.handleMouseMove)
        }
render() {
// 在render函数里面返回传递过来的组件，把当前组件的状态设置进去return<WrappedComponent {...this.state} />        }
    }
returnMouse}

哪个组件需要加强，通过调用withMouse这个函数，然后把返回的值设置到父组件中即可

functionPosition(props) {
return (
<p>X:{props.x}
Y:{props.y}
</p>    )
}
// 把position 组件来进行包装letMousePosition=withMouse(Position)
classAppextendsReact.Component {
constructor(props) {
super(props)
    }
render() {
return (
<div>高阶组件<MousePosition></MousePosition></div>        )
    }
}

设置displayName

使用高阶组件存在的问题：得到两个组件的名称相同

原因：默认情况下，React使用组件名称作为displayName

解决方式：为高阶组件设置displayName，便于调试时区分不同的组件

displayName的作用：用于设置调试信息(React Developer Tools信息)

设置方式：

传递props

问题：如果没有传递props，会导致props丢失问题

解决方式： 渲染WrappedComponent时，将state和props一起传递给组件

小结

组件通讯是构建React应用必不可少的一环

props的灵活性让组件更加强大

状态提升是React组件的常用模式

组件生命周期有助于理解组件的运行过程

钩子函数让开发者可以在特定的时机执行某些功能

render props 模式和高阶组件都可以实现组件状态逻辑的复用

组件极简模型： (state,props) => UI

React原理

目标

能够知道setState()更新数据是异步的

能够知道JSX语法的转化过程

setState()说明 （★★★）

更新数据

setState()更新数据是异步的

注意：使用该语法，后面的setState不要依赖前面setState的值

多次调用setState，只会触发一次render

推荐语法

推荐：使用 setState((state,props) => {}) 语法

参数state： 表示最新的state

参数props： 表示最新的props

第二个参数

场景：在状态更新(页面完成重新渲染)后立即执行某个操作

语法：setState(update[,callback])

JSX语法的转化过程 （★★★）

JSX仅仅是createElement() 方法的语法糖(简化语法)

JSX语法被 @babel/preset-react 插件编译为createElement() 方法

React 元素： 是一个对象，用来描述你希望在屏幕上看到的内容