React hook 以及 React Fiber 原理
/*
* @Descripttion: React hook 以及 React Fiber 原理
* @version:
* @Author: lhl
* @Date: 2021-03-10 15:42:23
* @LastEditors: lhl
* @LastEditTime: 2021-03-23 15:59:18
*/
// hook使用规则
// 只在最顶层使用 Hook
// 不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层调用他们
// 只在 React 函数中调用 Hook 不要在普通的 JavaScript 函数中调用 Hoo
// 在 React 的函数组件中调用 Hook 在自定义 Hook 中调用其他 Hook
// npm install eslint-plugin-react-hooks --save-dev ESLint 插件来强制执行这两条规则
// ESLint 配置
/*
{
"plugins": [
// ...
"react-hooks"
],
"rules": {
// ...
"react-hooks/rules-of-hooks": "error", // 检查 Hook 的规则
"react-hooks/exhaustive-deps": "warn" // 检查 effect 的依赖
}
}
*/
// 为什么选择使用 Hook
/**
* 1.在组件之间复用状态逻辑很难
* 2.复杂组件变得难以理解
* 3.用更少的代码，实现同样的效果
*/
// React Hooks的几个常用钩子
// useCallback 的功能完全可以由 useMemo 所取代
// useCallback(fn, inputs) === useMemo(() => fn, inputs)
/**
1.useState() // 状态钩子
2.useContext() // 共享状态钩子
3.useReducer() // action 钩子
4.useEffect() // 副作用钩子 useEffect在浏览器渲染完成后执行
5.useCallback() // 记忆函数
6.useMemo() // 记忆组件
7.useRef() // 保存引用值
8.useImperativeHandle() // 穿透 Ref
9.useLayoutEffect() // 同步执行副作用 不常用 useLayoutEffect在浏览器渲染前执行
10.自定义 hook // 以useXX开头的 封装重复使用的代码提高复用性
*
*/
import React, { useState, useEffect, useRef, useReducer, useCallback, useMemo, forwardRef, useImperativeHandle, Component } from 'react';
const HookComp = () => {
const size = useChangeSize();
const [count, setCount] = useState(0);
const [title, setTitle] = useState('标题')
let timer = useRef();
const ref = useRef();
// useEffect 就是一个 Effect Hook，给函数组件增加了操作副作用的能力。
// 它跟 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的用途，只不过被合并成了一个 API
// 相当于 componentDidMount 和 componentDidUpdate:
useEffect(() => {
timer.current = setInterval(() => {
console.log(1)
},1000)
document.title = `You clicked ${count} times`;
return () => {
clearInterval(timer.current) //相当于 componentWillUnmount
}
},[count]);
useEffect(() => {
ref.current.open()
},[])
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
<input type="text" value={title} onChange={e => setTitle(e.target.value)} />
<p>{title}</p>
<div>页面大小{size.width}*****{size.height}</div>
<TimeTest/>
<TestRef ref={ref}></TestRef>
<TestRef1 ref={ref}></TestRef1>
<BookkList/>
</div>
)
}
// useReducer 用法
function BookkList() {
const inputRef = useRef();
const [items, dispatch] = useReducer((state,action)=> {
console.log(state,action)
switch(action.type){
case 'add':
return [
...state,
{
id: state.length,
name: action.name
}
]
case 'del':
return state.filter((_,index) => index != action.index)
}
},[])
function handleAdd(event){
event.preventDefault();
dispatch({
type:'add',
name:inputRef.current.value
});
inputRef.current.value = '';
}
return (
<>
<form>
<input ref={inputRef}/>
<button onClick={ handleAdd }>点击添加</button>
</form>
<ul>
{
items.map((item, index) => (
<li key={item.id}>
{item.name}
<button onClick={ () => dispatch({type:'del',index})}>点击删除</button>
</li>
))
}
</ul>
</>
)
}
/*
useRef是一个方法，且useRef返回一个可变的ref对象
修改 ref 的值是不会引发组件的重新 render
useRef非常常用的一个操作，访问DOM节点，对DOM进行操作，监听事件等等
ref 在所有 render 都保持着唯一的引用，因此所有的对 ref 的赋值或者取值拿到的都是一个 最终 的状态，而不会存在隔离
使用 useRef 来跨越渲染周期存储数据，而且对它修改也不会引起组件渲染
createRef 与 useRef 的区别: createRef 每次渲染都会返回一个新的引用，而 useRef 每次都会返回相同的引用。
forwardRef是用来解决HOC组件传递ref的问题的
*/
const TestRef = forwardRef((props, ref) => {
useImperativeHandle(ref, () => ({
open() {
alert("ref")
}
}))
return (
<div>useImperativeHandle 穿透 ref的使用</div>
)
})
// 等同于 =>
// useImperativeHandle(ref,createHandle,[deps])可以自定义暴露给父组件的实例值。如果不使用，
// 父组件的 ref(chidlRef) 访问不到任何值（childRef.current==null）
// useImperativeHandle应该与forwradRef搭配使用
// React.forwardRef会创建一个React组件，这个组件能够将其接受的ref属性转发到其组件树下的另一个组件中。
// React.forward接受渲染函数作为参数，React将使用prop和ref作为参数来调用此函数
const ChildComponent = (props, ref) => {
useImperativeHandle(ref, () => ({
open() {
alert("ref")
}
}));
return <h3>useImperativeHandle 穿透 ref的使用</h3>;
};
const TestRef1 = forwardRef(ChildComponent);
function TimeTest(){
const [count, setCount] = useState(0);
const preCount = usePreVal(count) // 使用自定义hook
const doubleCount = useMemo(() => {
return 2 * count;
}, [count]);
const timerID = useRef();
useEffect(() => {
timerID.current = setInterval(()=>{
setCount(count => count + 1);
}, 1000);
}, []);
useEffect(()=>{
if(count > 10){
console.log('大于10定时器不再走了')
clearInterval(timerID.current);
}
});
return (
<>
<button ref={timerID} onClick={() => {setCount(count + 1)}}>
Count: {count} === double: {doubleCount} === preCount：{preCount}
</button>
</>
);
}
// 使用 const preState = usePreVal(state) 获取上一个值
// useRef 不仅仅是用来管理 DOM ref 的，它还相当于 this , 可以存放任何变量
function usePreVal(state){
const ref = useRef();
useEffect(() => {
ref.current = state
})
return ref.current
}
// 自定义hooks，用use开头命名，封装重复使用的代码，在多个场景下使用，提高代码的复用性
// react hook监听窗口大小
function useChangeSize(){
const win = {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
const [size, setSize] = useState(win)
// useCallback缓存方法 [] 只执行一次
const onResize = useCallback(()=>{
console.log('111')
setSize(win)
},[])
useEffect(() => {
window.addEventListener('resize',onResize)
// 销毁时
return () => {
window.removeEventListener('resize',onResize)
}
},[onResize])
return size
}
export default HookComp
/**
* 复用一个有状态的组件引发的思考:
*
HOC【高阶组件: 一个函数接受一个组件作为参数，经过一系列加工后，最后返回一个新的组件】使用的问题：
嵌套地狱，每一次HOC调用都会产生一个组件实例
可以使用类装饰器缓解组件嵌套带来的可维护性问题，但装饰器本质上还是HOC
包裹太多层级之后，可能会带来props属性的覆盖问题
Render Props【渲染属性】：
数据流向更直观了，子孙组件可以很明确地看到数据来源
但本质上Render Props是基于闭包实现的，大量地用于组件的复用将不可避免地引入了callback hell问题
丢失了组件的上下文，因此没有this.props属性，不能像HOC那样访问this.props.children
*
涉及优化对比 函数组件 hook 和 class 【类】组件、函数组件
useCallback 和 useMemo 区别
useCallback(fn, inputs) is equivalent to useMemo(() => fn, inputs)
useCallback和useMemo的参数跟useEffect一致
useMemo和useCallback都会在组件第一次渲染的时候执行，之后会在其依赖的变量发生改变时再次执行；并且这两个hooks都返回缓存的值，
useMemo返回缓存的变量，useCallback返回缓存的函数。
* 唯一的区别是：useCallback 不会执行第一个参数函数，而是将它返回给你，而 useMemo 会执行第一个函数并且将函数执行结果返回给你
demo: useMemo 的用法
export default function WithMemo() {
const [count, setCount] = useState(1);
const [val, setValue] = useState('');
const countSum = useMemo(() => {
console.log('compute');
let sum = 0;
for (let i = 0; i < count * 100; i++) {
sum += i;
}
return sum;
}, [count]);
return <div>
<h4>{count}-{countSum}</h4>
{val}
<div>
<button onClick={() => setCount(count + 1)}>+c1</button>
<input value={val} onChange={event => setValue(event.target.value)}/>
</div>
</div>;
}
demo: useCallback 的用法
function Parent() {
const [count, setCount] = useState(0);
const [val, setVal] = useState('');
const callback = useCallback(() => {
return count;
}, [count]);
return <div>
<p>{count}</p>
<Child callback={callback}/>
<div>
<input value={val} onChange={event => setVal(event.target.value)}/>
<button onClick={() => setCount(count + 1)}>add</button>
</div>
</div>;
}
function Child({ callback }) {
const [count, setCount] = useState(() => callback());
useEffect(() => {
setCount(callback());
}, [callback]);
return <div> {count} </div>
}
使用场景是：有一个父组件，其中包含子组件，子组件接收一个函数作为props；通常而言，
如果父组件更新了，子组件也会执行更新；但是大多数场景下，更新是没有必要的，我们可以借助useCallback来返回函数，
然后把这个函数作为props传递给子组件；这样，子组件就能避免不必要的更新
所有依赖本地状态或props来创建函数，需要使用到缓存函数的地方，都是useCallback的应用场景
*
* 和 函数组件 class【类】 组件对比
* import React, { PureComponent } from 'react'
* import React, { Component } from 'react'
* React.memo(comp) 是React v16.6引进来的新属性
* React.memo会返回一个纯化(purified)的组件MemoFuncComponent
* 当组件的参数props和状态state发生改变时，React将会检查前一个状态和参数是否和下一个状态和参数是否相同，如果相同，组件将不会被渲染，如果不同，组件将会被重新渲染
* 它的作用和React.PureComponent类似，是用来控制函数组件的重新渲染的。React.memo(...) 其实就是函数组件的 React.PureComponent
*
* demo:
* class: Component 需要判断何时渲染 何时不会进行组件的重新渲染
* shouldComponentUpdate(nextProps, nextState) {
if (this.state.count === nextState.count) {
return false
}
return true
}
* const Funcomponent = ()=> {
return (
<div>
Hiya!! I am a Funtional component
</div>
)
}
const MemodFuncComponent = React.memo(FunComponent)
React.PureComponent是给ES6的类组件使用的
React.memo(comp)是给函数组件使用的
React.PureComponent减少ES6的类组件的无用渲染
React.memo(comp)减少函数组件的无用渲染
继承PureComponent时，不能再重写shouldComponentUpdate
useEffect、useMemo、useCallback都是自带闭包的。每一次组件的渲染，其都会捕获当前组件函数上下文中的状态(state, props)，
所以每一次这三种hooks的执行，反映的也都是当前的状态，你无法使用它们来捕获上一次的状态。
对于这种情况，应该使用ref来访问。
依赖为 [] 时： re-render 不会重新执行 effect 函数
没有依赖：re-render 会重新执行 effect 函数
useLayoutEffect 和 componentDidMount 和 componentDidUpdate 触发时机一致（都在在DOM修改后且浏览器渲染之前）；
useLayoutEffect 要比 useEffect 更早的触发执行；
useLayoutEffect 会阻塞浏览器渲染，切记执行同步的耗时操作
关于class 组件的 createRef
class RefTest extends React.Component{
constructor(props){
super(props);
this.myRef = React.createRef();
}
componentDidMount(){
console.log(this.myRef.current);
}
render(){
return <input ref={this.myRef}/>
}
}
*
*/
// React 组件种类
// 1 Es5原生方式React.createClass定义的组件
// const Eg1 = React.createClass({
// getInitialState:function(){
// return {
// name:'react'
// };
// },
// render:function(){
// return <div onClick={this._ClickEvent}>{ this.state.name }</div>
// },
// _ClickEvent:function(){
// console.log(`事件`)
// }
// })
// 2 无状态组件 【功能组件】
function Eg2(props){
return <div>{ props.name }</div>
}
// 3 类组件 【有状态组件 or 容器组件】
class Eg3 extends Component {
constructor(props){
super(props)
this.state = {
}
}
render() {
return (
<div>
</div>
)
}
}
// 4 渲染组件 与 无状态组件类似
const Eg4 = (props) => {
return (
<div>{ props.name }</div>
)
}
// 5 高阶组件 HOC 【不要在 render 方法中使用 HOC】
// 一个高阶组件是一个函数，它输入一个组件，然后返回一个新的组件 const EnhancedComponent = higherOrderComponent(WrappedComponent);
function Eg5(WrappedComponent) {
// HOC设置显示名称
Eg5.displayName = `Eg5(${getDisplayName(WrappedComponent)})`;
return class extends React.Component {
componentDidUpdate(prevProps) {
console.log('Current props: ', this.props);
console.log('Previous props: ', prevProps);
}
render() {
return <WrappedComponent {...this.props} />;
}
}
}
// HOC设置显示名称
function getDisplayName(WrappedComponent) {
return WrappedComponent.displayName || WrappedComponent.name || "Component";
}
// 6 function + hook 组件
/**
* React Fiber 【Fiber 架构就是用 异步的方式解决旧版本 同步递归导致的性能问题】
旧版 React 通过递归的方式进行渲染，使用的是 【JS引擎自身的函数调用栈】，它会一直执行到栈空为止。
Fiber实现了自己的【组件调用栈】，它以链表的形式遍历组件树，可以灵活的暂停、继续和丢弃执行的任务。
实现方式是使用了浏览器的 requestIdleCallback 这一 API:
将 计算任务 分给成一个个小任务，分批完成，在完成一个小任务后，将控制权还给浏览器，让浏览器利用间隙进行 UI 渲染
React Fiber 出现的背景：
当页面元素很多，且需要频繁刷新的场景下，浏览器页面会出现卡顿现象，原因是因为 计算任务 持续占据着主线程，从而阻塞了 UI 渲染
React 框架内部的运作可以分为 3 层
Virtual DOM 层 --> 描述页面长什么样
Reconciler 层 --> 负责调用组件生命周期方法，进行 Diff 运算等。
Renderer 层 --> 根据不同的平台，渲染出相应的页面，比较常见的是 ReactDOM 和 ReactNative
*
* Fiber 其实指的是一种数据结构，它可以用一个纯 JS 对象来表示
*
* const fiber = {
stateNode, // 节点实例
child, // 子节点
sibling, // 兄弟节点
return, // 父节点
}
Fiber Reconciler 的 2 个阶段:
阶段一，生成 Fiber 树【本质来说是一个链表】，得出需要更新的节点信息。这一步是一个渐进的过程，可以被打断。
【让优先级更高的任务先执行，从框架层面大大降低了页面掉帧的概率】
阶段二，将需要更新的节点一次过批量更新，这个过程不能被打断
阶段一有两颗树，Virtual DOM 树和 Fiber 树，Fiber 树是在 Virtual DOM 树的基础上通过额外信息生成的。
它每生成一个新节点，就会将控制权还给浏览器，如果浏览器没有更高级别的任务要执行，则继续构建；反之则会丢弃 正在生成的 Fiber 树，等空闲的时候再重新执行一遍
【V16版本之前】栈调和（Stack reconciler） --> 【V16版本之后】 Fiber reconciler
React diff 将传统 diff 算法的复杂度 O(n^3) 复杂度的问题转换成 O(n) 复杂度的问题
React Diff三大策略: 【将 Virtual DOM 树转换成 actual DOM 树的最少操作的过程称为 协调（Reconciliaton）】
1.tree diff: 【Web UI中DOM节点跨层级的移动操作特别少，可以忽略不计】
React对 Virtual DOM 树进行层级控制，只会对相同层级的DOM节点进行比较，即同一个父元素下的所有子节点，
当发现节点已经不存在了，则会删除掉该节点下所有的子节点，不会再进行比较。
这样只需要对DOM树进行一次遍历，就可以完成整个树的比较。复杂度变为O(n);
2.component diff: 【拥有相同类的两个组件 生成相似的树形结构,拥有不同类的两个组件 生成不同的树形结构】
3.element diff: 【对于同一层级的一组子节点，通过唯一id区分】 当节点属于同一层级：插入、移动、删除 【设置唯一 key的策略】
*/
未经允许，请勿随意转载！！谢谢合作！！！
