1、setState(newState,callback)
React中可以通过修改state，通知React进行Update的方法
callback用途，接收更新后的state，可以继续操作
一般情况下 是一个异步方法
但是在定时器以及原生DOM事件会是一个同步方法
异步方法的好处
setState设计为异步，可以显著的提升性能；
如果每次调用setState都进行一次更新，那么意味着render函数会被频繁调用，界面重新渲染，这样效率是很低的；
最好的办法应该是获取到多个更新，之后进行批量更新；
如果同步更新了state，但是还没有执行render函数，那么state和props不能保持同步；
state和props不能保持一致性，会在开发中产生很多的问题；
在调用setState后直接使用新的state是不建议的
this.setState({id:'123'});
console.log(this.state.id) // 这时候id不一定是 123
应该写成
this.setState({id:'123'},(state)=>{
console.log(state.id) // 这时候 id===123
})
异步变同步(不推荐)
class MyComponent extend React.Component{
constructor(){
this.state={
id:'haha'
}
}
componentDidMount(){
document.getElelemtnById('btn').addEventListener('clcik',()=>{
this.setState({id:'123'});
console.log(this.state.id) // 这时候id是 123
})
}
updateWithsetTimeout = ()=>{
setTimeOut(()=>{
this.setState({id:'123'});
console.log(this.state.id) // 这时候id是 123
},0)
}
render(){
return (
<>
)
}
}
2、受控组件
在React 中，可变状态（mutable state）通常保存在组件的state 属性中，并且只能通过使用setState()来更新。
我们将两者结合起来，使React的state成为“唯一数据源”；
渲染表单的React 组件还控制着用户输入过程中表单发生的操作；
被React 以这种方式控制取值的表单输入元素就叫做“受控组件”；
由于在表单元素上设置了value属性，因此显示的值将始终为this.state.value，这使得React 的state 成为唯一数据源。
由于handleUsernameChange在每次按键时都会执行并更新React 的state，因此显示的值将随着用户输入而更新。
class FormComponent extends React.Component{
constructor(){
this.state = {
inputValue:'',
}
}
onChange = (e) =>{
const value = e.target.value;
this.setState({inputValue:value});
}
render(){
return (
)
}
}
3、非受控组件
如果要使用非受控组件中的数据，那么我们需要使用ref来从DOM节点中获取表单数据
在非受控组件中通常使用defaultValue来设置默认值
class FormComponent extends React.Component{
constructor(){
this.inputRef = React.createRef();
}
onBtnClick = () =>{
console.log(
`input - ${this.inputRef.current.value}`
);
}
render(){
return (
<>
)
}
}
4、高阶组件
至少满足以下条件之一：
接受一个或多个函数作为输入；
输出一个函数；
高阶组件的英文是Higher-Order Components，简称为HOC；
官方的定义：高阶组件是参数为组件，返回值为新组件的函数；
我们可以进行如下的解析：
首先，高阶组件本身不是一个组件，而是一个函数；
其次，这个函数的参数是一个组件，返回值也是一个组件；
function higherOrderComponent(component){
class Component extends React.Component{
render (){
{/* 需要将接收的props进行向下传递 */}
return 应用场景一：props 增强
1、不改变原有代码情况下，扩增props react-redux的connect就是这个作用
2、利用高阶组件进行Context共享(减少业务组件在使用时对Context.Consumer 编写不友好的问题)
应用场景二：渲染判断鉴权
加一层判断，控制组件是否渲染
应用场景三：生命周期劫持
虚空增加的一层父组件，可以在原需要组件进行渲染的时候，根具特定的生命周期进行一些类似于 热点、渲染时间、错误边界捕获等记录。
HOC的意义
我们会发现利用高阶组件可以针对某些React代码进行更加优雅的处理。
其实早期的React有提供组件之间的一种复用方式是mixin，目前已经不再建议使用：
Mixin可能会相互依赖，相互耦合，不利于代码维护
不同的Mixin中的方法可能会相互冲突pMixin非常多时，组件是可以感知到的，甚至还要为其做相关处理，这样会给代码造成滚雪球式的复杂性
当然，HOC也有自己的一些缺陷：
HOC需要在原组件上进行包裹或者嵌套，如果大量使用HOC，将会产生非常多的嵌套，这让调试变得非常困难；
HOC可以劫持props，在不遵守约定的情况下也可能造成冲突；
Hooks的出现，是开创性的，它解决了很多React之前的存在的问题
比如this指向问题、比如hoc的嵌套复杂度问题等等；
5、Portals的使用
通常来讲，当你从组件的render方法返回一个元素时，该元素将被挂载到DOM节点中离其最近的父节点：
Portals提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的方案
ReactDOM.createPortal(child, container)
第一个参数（child）是任何可渲染的React 子元素，例如一个元素，字符串或fragment；
第二个参数（container）是一个DOM元素；
即使child子元素被挂载到其他DOM结点下，只是DOM级挂载，但是在Fiber树上，它仍属于原Parent结点的子节点。
现象级挂载
就是从HTML代码结构上可以看到是确实被挪移到目标结点下
目标结点通过添加事件监听，也能捕获child子元素对应冒泡的事件
仍属于Parent原结点
1、仍然可以使用Context,不脱离作用域范围。
2、在父结点上添加的React事件(onClick)，在子节点上发生时事件时，仍能被冒泡捕获到。
3、但是通过elemnt.addEventListener 这种方式就不能再捕获对应事件！因为DOM元素真的被移走了！
即使这里的Portal被移动到其他DOM结点下，当点击Button时，仍能被Parent的onClick事件所捕获
代码地址