react基础笔记（3）

高阶组价
1，创建一个函数，名称约定以with开头
2，制定函数参数，参数应该以大写字母开头
3、在函数内部创建一个类，提供复用的状态逻辑代码
4，该组件中，渲染参数组件，同时将状态通过prop传递参数
displayName 设置高级组件的名称
组件名.displayName='withMoues${getDisplayName(wrappdComponent)}'
注：如果不设置高阶组价名字 调试时得到的组件名是相同的
传递props
问题props丢失
原因：高阶组价没有往下传递props
解决方法：渲染WrappedComponent时，将state和this.props一起传递给组件
传递方法

<WrappedComonent {..this.state} {...this.props}

setState（）说明
更新数据
setState是异步更新数据的
注：使用该语法，后面的setState不要依赖前面的setState
可以多次调用setState,只会触发一次重新渲染
推荐语法：使用setState(（state,props）=>{}) 其中setstat中state，props是最新的数据
参数props:表示最新的props
eg：

this.setState((state,props)=>{
return{
count:state.count+1
}
})

第二个参数
语法：setState（updater,[callback]）
this.setState(
(state,props)=>{},
//状态跟新后并重新渲染后，立即执行
()=>{console.log('这个回调函数会在状态跟新后立即执行')}
)

JSX
JSX仅仅是createElement语法的语法糖（简化语法）
JSX语法被@balel/preset-react插件编译为createElement方法

组件跟新机制
setState()的作用：1.修改state 2.更新组件（ui）
过程：父组件从新渲染时，也会重新渲染子组件。但只会渲染当前组件子树（当前组件及其所有子组件）

组件性能优化
减轻state：只存储跟组件渲染相关的数据
注意：不用做渲染的数据不要放在state中，比如定时器id等
对于这种需要在多个方法中用到的数据，应该放在this中
避免不必要的重新渲染
组件跟新机制：父组件更新会引起子组件的跟新
问题：子组件没有任何的变化也会重新渲染
解决：使用钩子函数 shouldComponentUpdata(nextProps,nextState)
作用：通过返回值决定该组件是否重新渲染，返回true表示重新渲染，fales表示不重新渲染
class Hellow extends Component{
shouldComponentUpdate(nextprops,nextate){ //俩个参数分别表示跟最新的参数 和最新的状态
//根据条件决定是否重新渲染
//获取最新的状态
console.log('最新的state'，nextstate)
//跟新前的状态
console.log('this.state',this.state)
return false
触发时机：跟新阶段钩子函数，组件重新渲染前执行（shouldComponentUpdate->render）
}
}

虚拟Dom：本质是一个js对象，用来描述 你希望在屏幕上看到的内容