React-Extension

React-Extension

一、挂载渲染API改变

​ react 18

import React from "react";
import { createRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
createRoot(container).render(<App />)

二、setState

setState更新状态的两种写法

1.使用简述

1.setState(stateChange,[callback])		---对象式的setState
        a.stateChange为状态改变对象(该对象可以体现出状态的更改)
        b.callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用
2.setState(updater, [callback])------函数式的setState
        a.updater为返回stateChange对象的函数。
        b.updater可以接收到state和props。
        c.callback是可选的回调函数, 它在状态更新、界面也更新后(render调用后)才被调用。
总结:
		1.对象式的setState是函数式的setState的简写方式(语法糖)
		2.使用原则：
				(1).如果新状态不依赖于原状态 ===> 使用对象方式
				(2).如果新状态依赖于原状态 ===> 使用函数方式
				(3).如果需要在setState()执行后获取最新的状态数据, 
					要在第二个callback函数中读取    

2.编码

export default class Demo extends Component {
    state = { count: 0 }
    render() {
        return (
            <div>
                <h1>当前求和为：{this.state.count}</h1>
                <button onClick={this.add}>点我加一</button>
            </div>
        )
    }
    add = () => {
        // 1.获取原来的count值
        // const { count } = this.state;
        // 2.对象形式更新状态 React状态的更新是异步的
        // this.setState({
        //     count: count + 1
        // },
        // (...args)=>{
        //     console.log(this.state.count);  // 更新完状态，render()调用完成之后，调用
        // })
        // console.log('@20',this.state.count); // 同步代码 count === 0
        
        // 2.函数形式
        this.setState(state => ({ count: state.count + 1 }))

    }
}

三、懒加载

​ 路由组件的lazyLoad

	//1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包
	const Login = lazy(()=>import('@/pages/Login'))
	
	//2.通过<Suspense>指定在加载得到路由打包文件前显示一个自定义loading界面
	<Suspense fallback={<h1>loading.....</h1>}>
        <Switch>
            <Route path="/xxx" component={Xxxx}/>
            <Redirect to="/login"/>
        </Switch>
    </Suspense>

四、Hooks

1.hooks作用

​ 让函数式组件，可以使用state、生命周期、ref

2.常用Hook

a.	State Hook:	React.useState()
b.	Effect Hook: React.useEffect()
c.	Ref Hook: React.useRef()

3.State Hook

a.使用简述

1.让函数组件拥有自己的state
2.语法：const [xxx,setXxx] = React.useState(initValue)
3. useState()说明:
        参数: 第一次初始化指定的值在内部作缓存
        返回值: 包含2个元素的数组, 第1个为内部当前状态值, 第2个为更新状态值的函数
4. setXxx()2种写法:
        setXxx(newValue): 参数为非函数值, 直接指定新的状态值, 内部用其覆盖原来的状态值
        setXxx(value => newValue): 参数为函数, 接收原本的状态值, 返回新的状态值, 内部用其覆盖原来的状态值

b.编码

const [count, setCount] = React.useState(0);
    
function add() {
    // setCount(count + 1)
    setCount(count => count + 1)
}

4.Ref Hook

a.使用简述

1. Ref Hook可以在函数组件中存储/查找组件内的标签或任意其它数据
2. 语法: const refContainer = useRef()
3. 作用:保存标签对象,功能与React.createRef()一样

b.编码

function Demo() {
    const myRef = React.useRef();
    return (
        <div>
            <input type="text" ref={myRef} />
            <button onClick={showData}>show input data</button>
        </div>
    )
    function showData(){
        alert(myRef.current.value)
    }
}

5. Effect Hook

a.使用简述

(1). Effect Hook 可以让你在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子)
(2). React中的副作用操作:
        发ajax请求数据获取
        设置订阅 / 启动定时器
        手动更改真实DOM
(3). 语法和说明: 
        useEffect(() => { 
          // 在此可以执行任何带副作用操作
          return () => { // 在组件卸载前执行
            // 在此做一些收尾工作, 比如清除定时器/取消订阅等
          }
        }, [stateValue]) // 如果指定的是[], 回调函数只会在第一次render()后执行,// 如果没写后一个参数，就是监视所有
    
(4). 可以把 useEffect Hook 看做如下三个函数的组合
        componentDidMount()
        componentDidUpdate()
    	componentWillUnmount() 

b.编码

    let timer;
    React.useEffect(() => {
        timer = setInterval(() => {
            setCount(count => count + 1)
        }, 1000);
        return () => {
            // 返回的函数，相当于componentWillUnmount
            clearInterval(timer);
        }
    }, [])
    // [] 填写需要检测的变量

五、Fragment

可以不用必须有一个真实的DOM根标签了，相当于Vue中的 template 标签

编码:

import React, { Component, Fragment } from 'react'

export default class Demo extends Component {
    render() {
        return (
              <Fragment>     
                  {/* 编译时，会丢掉Fragment 只能写key属性 */}
                  <input type="text" />
                  <input type="text" />
              </Fragment>
            // <>
            //     <input type="text" />
            //     <input type="text" />
            // </>
        )
    }
}

六、Context

​ 一种组件间通信方式, 常用于【祖组件】与【后代组件】间通信

1.使用简述

1) 创建Context容器对象：
	const XxxContext = React.createContext()  
	
2) 渲染子组时，外面包裹xxxContext.Provider, 通过value属性给后代组件传递数据：
	<xxxContext.Provider value={数据}>
		子组件
    </xxxContext.Provider>
    
3) 后代组件读取数据：

	//第一种方式:仅适用于类组件 
	  static contextType = xxxContext  // 声明接收context
	  this.context // 读取context中的value数据
	  
	//第二种方式: 函数组件与类组件都可以
	  <xxxContext.Consumer>
	    {
	      value => ( // value就是context中的value数据
	        要显示的内容
	      )
	    }
	  </xxxContext.Consumer>

2.编码

const MyContext = React.createContext();
const { Provider,Consumer } = MyContext;

export default class A extends Component {
    state = {
        username: 'tom',
        age: 19
    }
    render() {
        const { username, age } = this.state;
        return (
            <div>
                <Provider value={{ username, age }}>
                    <B />
                </Provider>
            </div>
        )
    }
}

class B extends Component {render() {return (<div><C /></div>)}}

// 类式组件接收Context数据
class C extends Component {
    static contextType = MyContext  // 声明接收context
    render() {
        const { username, age } = this.context;
        return (
            <div>
                我所接收的B所传递用户名：{username}---{age}
            </div>
        )
    }
}

// 函数组件与类式组件都可用的就收方式
function C() {
    return (
        <div>
            <Consumer>
            {value=>`${value.username} --- ${value.age}`}
            </Consumer>
        </div>
    )
}

七、组件优化

1.问题说明

​ Component中的shouldComponentUpdate()总是返回true

a. 只要执行setState(),即使不改变状态数据, 组件也会重新render() ==> 效率低
b. 只当前组件重新render(), 就会自动重新render子组件，纵使子组件接收到的props没有改变 ==> 效率低

注意：使用setState()方法时，返回新的引用对象

 changeCar = () => {
        // let obj = this.state;
        // obj.carName = '迈巴赫';
        // this.setState(obj)   //不会渲染
        this.setState({carName:'迈巴赫'})  // 只要调了setState都会重新render(),不论是否更新了数据，子组件也会render(纵使子组件没有使用父组件的数据)
    }

2.高效做法

只有当组件的state或props数据发生改变时才重新render()

3.问题解决(一)

a.解决简述

重写shouldComponentUpdate()方法
比较新旧state或props数据, 如果有变化才返回true, 如果没有返回false

b.编码

​ 这里使用了JOSN.stringify()，丐版的深度比较

shouldComponentUpdate = (nextProps = {}, nextState = {}) => {
    const thisProps = this.props || {}, thisState = this.state || {};
    nextProps = nextProps || {};
    nextState = nextState || {};
    const nextStr = JSON.stringify(nextProps) + JSON.stringify(nextState);
    const previouStr = JSON.stringify(this.props) + JSON.stringify(this.state);
    return nextStr === previouStr ? false : true;
}

c.优化编码

​ 使用依赖库 immutable ，了解immutable 参考 Immutable 详解及 React 中实践 - 知乎 (zhihu.com)

import { is } from 'immutable';

shouldComponentUpdate = (nextProps = {}, nextState = {}) => {
        const thisProps = this.props || {}, thisState = this.state || {};
        nextProps = nextProps || {};
        nextState = nextState || {};

        if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
            Object.keys(thisState).length !== Object.keys(nextState).length) {
            return true;
        }
        for (const key in nextProps) {
            if (!is(thisProps[key], nextProps[key])) {
                return true;
            }
        }
        for (const key in nextState) {
            if (thisState[key] !== nextState[key] && !is(thisState[key], nextState[key])) {
                return true;
            }
        }
        return false;
}

4.问题结局(二)

a.解决简述

使用PureComponent
	PureComponent重写了shouldComponentUpdate(), 只有state或props数据有变化才返回true
	注意: 
		只是进行state和props数据的浅比较, 如果只是数据对象内部数据变了, 返回false  
		不要直接修改state数据, 而是要产生新数据

b.编码

import { PureComponent } from 'react'

class Child extends PureComponent {

    render() {
        console.log('Child--redner')
        return (
            <div style={{ padding: '20px', border: 'solid 1px blue' }}>
                <h2>我是 Child</h2>
                我接到的车：{this.props.carName}
            </div>
        )
    }
}

八、render props

向组件内部动态传入带内容的结构(标签)

1.概念简述

Vue中: 
	使用slot技术, 也就是通过组件标签体传入结构  <A><B/></A>
React中:
	使用children props: 通过组件标签体属性传入结构	 // props.children
	使用render props: 通过组件标签属性传入结构,而且可以携带数据，一般用render函数属性	//通过props传入一个返回 组件的函数

2.children props

<A>
  <B>xxxx</B>
</A>
{this.props.children}
问题: 如果B组件需要A组件内的数据, ==> 做不到 

3.render props

<A render={(data) => <C data={data}></C>}></A>
A组件: {this.props.render(内部state数据)}
C组件: 读取A组件传入的数据显示 {this.props.data} 

九、Error_boundary

1.问题简述

理解：
错误边界(Error boundary)：用来捕获后代组件错误，渲染出备用页面

特点：
只能捕获后代组件生命周期产生的错误，不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误

使用方式：
getDerivedStateFromError配合componentDidCatch

2.编码

export default class Parent extends Component {
    state = {
        hasError: '' // 用于标识子组件是否产生错误
    }

    // 当Parent的子组件出现错误时，会调用该函数，更新State中hasError的状态
    static getDerivedStateFromError(error) {
        return { hasError: error }
    }
    render() {
        return (
            <div style={{ padding: '20px', border: 'solid 1px red' }}>
                <h3>我是 Parent</h3>
                {this.state.hasError ? <h2>当前网络不稳定,请稍后再试</h2> : <Child />}
            </div>
        )
    }
    componentDidCatch() {
        console.log('此处统计错误，反馈给服务器，用于通知编码人员的bug解决');
    }
}

十、组件间通信

1.组件间的关系

父子组件
兄弟组件（非嵌套组件）
祖孙组件（跨级组件）

2.常用通信方式

	1.props：
		(1).children props
		(2).render props
	2.消息订阅-发布：
		pubs-sub、event等等
	3.集中式管理：
		redux、dva等等
	4.conText:
		生产者-消费者模式

比较好的搭配方式：

	父子组件：props
	兄弟组件：消息订阅-发布、集中式管理
	祖孙组件(跨级组件)：消息订阅-发布、集中式管理、conText(开发用的少，封装插件用的多)