常见的钩子函数
☆ useState
const [state, setState] = useState(initialState);
state：目的是提供给 UI，作为渲染视图的数据源
setState：改变 state 的函数，可以理解为this.setState
initialState：初始默认值
注意点：useState有点类似于PureComponent,会进行一个比较浅的比较，如果是对象的时候直接传入并不会更新，这点一定要切记
☆ useEffect
副作用（function做了和本身运算返回值无关的事），可以理解为是函数组件的生命周期，也是我们最常用的钩子
第二个参数是一个数组，如果不设置第二个参数，无论在什么情况下都会执行这个钩子函数，模仿挂载和卸载的动作，return后面的数据在组件卸载时会被调用
如果传递一个空数组，就只会执行一次，也可以为他添加上依赖值
☆ useContext
类似于Context：其本意就是设置全局共享数据，使所有组件可跨层级实现共享
useContext的参数一般是由createContext的创建，通过 CountContext.Provider 包裹的组件，才能通过 useContext 获取对应的值
const CountContext = createContext(-1)
const count = useContext(CountContext)
☆ useMemo
判断是否满足当前的限定条件来决定是否执行callback函数，而useMemo的第二个参数是一个数组，通过这个数组来判定是否更新回调函数，，函数式组件会从头更新到尾，只要一处改变，所有的模块都会进行刷新，这种情况显然是没有必要的。只要父组件的状态更新，无论有没有对自组件进行操作，子组件都会进行更新，useMemo就是为了防止这点而出现的
return useMemo(() => list.map((item:number) => {
console.log(1)
return Math.pow(item, 2)
}), [])
☆ useCallback
useCallback与useMemo极其类似,可以说是一模一样，唯一不同的是useMemo返回的是函数运行的结果，而useCallback返回的是函数
注意：这个函数是父组件传递子组件的一个函数，防止做无关的刷新，其次，这个组件必须配合memo,否则不但不会提升性能，还有可能降低性能
☆ useReducer
类似于redux功能的api
☆ useRef
可以获取当前元素的所有属性，并且返回一个可变的ref对象，并且这个对象只有current属性，可设置initialValue
可以用来获取元素的所有属性，也能用来存放值
☆ useImperativeHandle
可以让你在使用 ref 时自定义暴露给父组件的实例值
useImperativeHandle(ref, createHandle, [deps])
ref：useRef所创建的ref
createHandle：处理的函数，返回值作为暴露给父组件的 ref 对象。
deps：依赖项，依赖项更改形成新的 ref 对象。
返回给父组件使用
useImperativeHandle(cRef, () => ({
add
}))
const add = () => {
setCount((v) => v + 1)
}
☆ useLayoutEffect：开发过程中一般使用useEffect就足够了
与useEffect基本一致，不同的地方时，useLayoutEffect是同步，useLayoutEffect在 DOM 更新之后，浏览器绘制之前，这样做的好处是可以更加方便的修改 DOM，获取 DOM 信息,这样浏览器只会绘制一次，所以useLayoutEffect在useEffect之前执行。如果是useEffect的话 ，useEffect 执行在浏览器绘制视图之后，如果在此时改变DOM，有可能会导致浏览器再次回流和重绘。除此之外useLayoutEffect的 callback 中代码执行会阻塞浏览器绘制
☆ useDebugValue
可用于在 React 开发者工具中显示自定义 hook 的标签
☆ useTransition
返回一个状态值表示过渡任务的等待状态，以及一个启动该过渡任务的函数。
const [isPending, startTransition] = useTransition();
isPending：过渡状态的标志，为true时是等待状态
startTransition：可以将里面的任务变成过渡任务
const Index = () => {
const [isPending, startTransition] = useTransition();
const [input, setInput] = useState('');
const [list, setList] = useState([]);
return <div>
<div>大家好：我是小杜杜~</div>
输入框： <input
value={input}
onChange={(e) => {
setInput(e.target.value);
startTransition(() => {
const res = [];
for (let i = 0; i < 2000; i++) {
res.push(e.target.value);
}
setList(res);
});
}} />
{isPending ? (
<div>加载中...</div>
) : (
list.map((item, index) => <div key={index}>{item}</div>)
)}
</div>
}
export default Index
React 组件类 API
☆ Component
React中的组件，类组件需继承这个api
☆ PureComponent
纯组件会对props和state做浅层比较，提升性能，不刷新的时候不刷新，他自带的属性就实现了shouldComponentUpdate 这个生命周期函数
☆ memo（高阶组件）
类似于shouldComponentUpdate这个生命周期，有两个参数 第一个是组件本身，第二个是一个回调函数（返回是true则不刷新，返回为false则刷新），可以判断只组件是否可以刷
（只判断props）
☆ forwardRef
传递ref
☆ lazy
懒加载组件（可以定义一个动态加载组件）减少bundle的体积 他的参数是一个函数 lazy(()=>import('./Child'))
注意：这个组件必须和Suspense配合使用
☆ Suspense
让组件等待某个异步组件操作，直到该异步操作结束即可渲染，在使用lazy加载组件的时候，一定要加上这个
他和lazy都可以用于等待照片，脚本和一些异步的情况，他的fallback为等待时的渲染样式 <Suspense fallback={()=><div>Loading</div>}>
☆ Fragment
碎片化，允许返回多个结点（类似<></>） <React.Fragment></React.Fragment>，相比<></> 这个可以给一个key值，在遍历数组的时候很有用
☆ Profiler
这个组件用于性能检测，可以检测一次react组件渲染时的性能开销,不常用
☆ StrictMode
严格模式，是一种用于突出显示应用程序中潜在问题的工具，与Fragment一样，StrictMode也不会出现在UI层面，只是会检查和警告
React 工具类 API
☆ createContext
用于传递上下文,createContext会创建一个Context对象，用Provider的value来传递值，用Consumer接受value
const {Provider,Consumer} = React.createContext(),里面可以设置默认值
☆ createElement
element：原生组件的话是标签的字符串，如“div”，如果是React自定义组件，则会传入组件
[props]：对象，dom类中的属性，组件中的props
[...children]：其他的参数，会依此排序
return React.createElement(
'div',
null,
"Hi！我是小杜杜",
React.createElement('p', null, '欢迎')，
React.createElement(
Children,
null,
'我是子组件'
)
)
☆ cloneElement
克隆并返回一个新的React元素
☆ createRef
创建一个ref对象，获取节点信息， node = React.createRef()
不过我们可以直接通过ref来获取值，没有必要再通过createRef去获取 <div ref={(node)=>this.node=node}></div> node 为节点信息
☆ Children：提供处理this.props.children不透明数据结构的实用程序.
map：两个参数
可以将通过children传递过来后被包裹成数组类型的进行处理 React.Children.map(children,(item)=>item)
forEach：
与Children.map类似，不同的是Children.forEach并不会返回值，而是停留在遍历阶段 React.Children.forEach(children, (item) => console.log(item))
count：
返回Child内的总个数，等于回调传递给map或forEach将被调用的次数 React.Children.count(children)
toArray：
以平面数组的形式返回children不透明数据结构，每个子元素都分配有键。获取扁平化后的数据 React.Children.toArray(children)
only：
验证Child是否只有一个元素，如果是，则正常返回，如果不是，则会报错。 React.Children.only(children)
☆ isValidElement
用于验证是否是React元素，是的话就返回true，否则返回false，感觉没什么用
☆ createFactory
返回一个生成给定类型的 React 元素的函数。
const Child = React.createFactory(()=><div>createFactory</div>)
这个可以直接使用，但是官方不建议我们写这个，不常用，应该快废弃了
