setState
setState用法
可以传入一个对象，也可以传入一个函数，，
setState是异步的，会将对象加入一个队列，在一定的时间之后进行统一渲染，，，所以多次调用setState去累加某一个值，是会有问题的
如果想获取异步之后的值，有第二个参数，传入一个函数，获取渲染后的值
this.setState({count:this.state.count+1},(res)=>{console.log(res,"res")})
当然也可以在生命周期函数 componentDidUpdate(prevProps,prevState,snapshot)
如果想获取每次setState设置的状态值，，可以传入一个函数，获取上一个状态的state和props：
changeCount(){/*** setState 是异步的，， 如果想要获取上一次state的状态* 上一个state，，， 可以在，上一个state的状态修改，，* 返回一个对象，，和之前的state合并，， 合并使用 Object.assign*/this.setState((prevState,prevProps)=>{console.log(prevState.count)return {count:prevState.count+1}})this.setState((prevState,prevProps)=>{console.log(prevState.count)return {count:prevState.count+1}})}
在react18之后 setState是异步的，在react18之前，在react的事件中，setState是异步的，在原生DOM事件中，比如addEventListener或者setTimeout中是同步的
在react18之后，默认所有的操作都放到了批处理中，，， 异步批渲染
如果希望代码同步，，，可以使用 flushSync
import {flushSync} from "react-dom";
flushSync(()=>{// 同步代码this.setState({count:11})
})
console.log(this.state.count)
SCU
SCU: shouldComponentUpdate
默认继承react的Component类实现的组件，，在更新的时候，不管是否有改动，都会全部更新，，
shouldComponentUpdate 可以先浅层比较传入对象是否相同，相同就不去渲染，不相同再渲染。。。。
PureComponent是实现了这个SCU的组件，一般使用这个
react更新流程
- props/state改变
- render函数重新执行
- 产生新的dom树
- 进行diff算法
- 计算出差异，进行更新
这个diff算法最终被优化成了：
- 同层节点之间相互比较，不回跨节点比较
- 不同类型的节点，产生不同的树结构
- 开发中，可以通过key，来指定哪些节点在不同的渲染下保持稳定
shouldComponentUpdate
生命周期钩子
sholdComponentUpdate((nextProps,nextState)=>{// 返回true， 调用render// 返回false 不调用
})
类组件继承PureComponent可以自己比较
函数组件需要使用一个高阶函数 memo 进行包裹，，
高阶函数就是，传入一个组件，返回一个新的组件，，，对原来组件的增强
memo(function (){ return "xx"
})
不可变数据的力量
react组件中，，state中的数据，是不可变的，，不要去随意改变state中的数据，，而是浅拷贝一个新的值，修改之后去赋值
如果你直接修改state中的某个对象，，但是PureComponent或者Memo的浅层比较是发现不了对象底层数据变化的，
只能通过赋值一个新的对象，进行改变
ref使用
this.refs.名字
class App extends PureComponent {componentDidMount() {this.refs.hehe.printHehe()}render() {return (<div><Hehe ref="hehe"/></div>);}
}createRef 函数
import React, { createRef, PureComponent} from 'react';
import Hehe from "./Hehe";class App extends PureComponent {componentDidMount() {console.log(this.HeheRef)this.HeheRef.current.printHehe()}constructor() {super();this.HeheRef = createRef()}render() {return (<div><Hehe ref={this.HeheRef}/></div>);}
}export default App;传入一个箭头函数，，函数的参数就是 当前ref本身，
import React, { createRef, PureComponent} from 'react';
import Hehe from "./Hehe";class App extends PureComponent {componentDidMount() {this.heheRef.printHehe()}constructor() {super();this.heheRef = null}render() {return (<div><Hehe ref={(result)=>this.heheRef = result}/></div>);}
}export default App;函数式组件没有实例，无法通过ref获取他们的实例。但是某些时候，我们想获取函数式组件内的某个DOM，，
可以将ref传递进去
import {forwardRef} from "react";const HelloWorld = forwardRef(function(props,ref){return (<div><h2 ref={ref}>hello word</h2></div>)
})export default HelloWorldimport React, { createRef, PureComponent} from 'react';
import Hehe from "./Hehe";
import HelloWorld from "./HelloWorld";class App extends PureComponent {componentDidMount() {this.heheRef.printHehe()console.log(this.hellowordRef.current)}constructor() {super();this.heheRef = nullthis.hellowordRef = createRef()}render() {return (<div><Hehe ref={(result)=>this.heheRef = result}/><HelloWorld ref={this.hellowordRef}/></div>);}
}export default App;受控组件
受控组件： 受react控制的组件，，如果绑定了react的state，就被react控制了，需要通过onChange去改变这个input的值。。
react中，state属性，只能通过setState来更新
非受控组件： 没有被react控制的组件，，使用defaultValue设置默认值，，用原生的方式去获取数据
js表单控件改变会掺入一个event，， event.target就是这个控件，， 设置state的时候，可以写成：
// 通过 event.target.type 先判断一个是否是 checkbox 或者是 radio，，
// 因为这两个控件的值，，在event.target.checked 上
this.setState({[event.state.name]:event.state.value
})
checkbox的多选，和 select的多选
高阶组件
高阶函数
- 接受一个或者多个函数作为输入
- 或者 返回一个函数
比如 ： map ，filter，reduce
高阶组件 higher order components
高阶组件，本身不是一个组件，是一个函数，，并且这个函数的参数是另一个组件，，返回值也是一个组件
props增强
有时候多个组件会共用属性，，但是每一个去使用 <Context.Consumer> 代码会很冗余，，在高阶函数中处理这些共用的属性
import React from "react";const UserContext = React.createContext()export default UserContextimport UserContext from "../context/user-context";function enhancerProps(OriginComponent){// 内部是另一个组件 === props是父组件传过来的propsreturn (props)=>{return (<UserContext.Consumer>{ value => <OriginComponent {...props} {...value} />}</UserContext.Consumer>)}}export default enhancerPropsimport React, { PureComponent} from 'react';
import HelloWorld from "./HelloWorld";
import UserContext from "./context/user-context";class App extends PureComponent {constructor() {super();this.state = {userInfo:{username:"cc",age:11}}}render() {return (<div><UserContext.Provider value={this.state.userInfo}><HelloWorld address="成都"/></UserContext.Provider></div>);}
}export default App;import React, {PureComponent} from 'react';
import enhancerProps from "./hoc/enhancerProps";
import UserContext from "./context/user-context";class HelloWorld extends PureComponent {render() {return (<div>{/*<UserContext.Consumer>*/}{/* { value=> <h3>{value.username}</h3>}*/}{/*</UserContext.Consumer>*/}{ this.props.username} - {this.props.age} --{this.props.address}</div>);}
}export default enhancerProps(HelloWorld);判断是否登录，，或者判断数据是否为空，展示提示
写在高阶组件里面
这个状态改变之后，是根据localStorage中的判断的，没有设置setState，也就没有执行render，，
this.forceUpdate() 强制更新
生命周期劫持
比如判断某个组件的加载时间，在钩子函数 UNSAFE_componentWillMount 和 componentDidMount 记录时间差
显示组件的加载时间
Hook可以替代HOC
portals使用
portals： 大门
react中会设置一个根组件，下面的子元素默认都是在这个根组件下面的，，， 在处理，对话框，提示框，固定定位元素的时候非常有用
import {createPortal} from "react-dom";
// 将第一个参数传入的节点，放入指定的DOM中
{createPortal(<div>hehe123</div>,document.querySelector("#other"))}
Fragment
类似于vue中的 template，。。。
<Fragment></Fragment>
react中的严格模式
// 被strictMode 标签包裹就会使用严格模式<StrictMode><App/>
</StrictMode>
