react高级特性

函数组件 hook
没有state,没有生命周期，效率快一些

import React, { useState } from 'react';
const [count, setCount] = useState(0);
return <div>
                        <p>You clicked {count} times</p>
                        <button onClick={() => setCount(count + 1)}>
                            Click me
                        </button>
                    </div>

非受控组件
使用场景:
必须受到操作DOM元素，setState实现不了
文件上传
某些富文本编辑器，需要传入DOM元素

受控组件vs非受控组件
优先使用受控组件
必须操作DOM，再使用非受控组件
受控组件:
非受控组件:<input ref={ref => this.myRef = ref} />

protals 传送门
把组件渲染到父组件以外

context 公用state
react的context用法，比如最外层定义的语言或者主题，逻辑不复杂:
// 创建 Context 填入默认值（任何一个 js 变量）
const ThemeContext = React.createContext(‘light’)

异步组件
vue:点击后加载import
react: react.lazy

性能优化
压缩图片cssjs，异步加载大图，组件
SCU控制加载，默认是true，如果不想加载改为false
state的数据结构不要太深，尽量扁平化。
用浅比较组件pureComponent和memo
immutable.js不可变值优化

高阶组件 HOC

Render Props
vue用slot插槽
react的portals，当父组件overflow:hidden或者z-index值太小
可以用portals
组件父子结构不变，只是渲染到其他地方。
return ReactDOM.createPortal(

{this.props.children}

,
document.body // DOM 节点
)

lifecycle
componentWillMount：组件挂载之前执行，只执行一次

componentDidMount: 组件渲染完成，只执行一次

=======================================================

componentWillRecevieProps: 组件将要接收新的props执行

shouldComponentUpdate: 判断组件是否应该重新渲染，默认是true

componentWillUpdate: 组件将要重新渲染

componentDidUpdate: 组件重新渲染完成

=======================================================

componentWillUnmount: 卸载组件

SCU,shouldComponentUpdate
在react中，父组件更新子组件默认也更新，shouldComponentUpdate默认返回true，即默认渲染所有自组件
**必须配合’不可变值’使用

PureComponent和memo
在SCU中实现浅比较，只比较第一层，性能更快
PureComponent class类组件
memo是函数式组件

immutable.js
彻底拥抱不可变值
基于共享数据，速度好
学习成本高

关于组件公共逻辑的抽离
mixin，已经被react弃用
HOC高阶组件，代替mixin
render props(通过函数将class组件的state作为props传递给纯函数组件)

const HOCFactory = (Component)=>{
class HOC extends React.Component{
render(){
return <Component {…this.props} />
// 透传所有props,vue用$props v-bind
}
}
return HOC
}
const Encomponent1 = HOCFactory(wrappedCom1)
const Encomponent2 = HOCFactory(wrappedCom2)

render props

thunk，特殊的闭包，延迟执行的函数。