react系列---【react组件通信、生命周期、组件优化、错误边际处理、表单、HOC高阶组件】

1.props

1.props可以传递数据，子组件接收

父组件传数据

 <Child name={name} age={age} json={json} ></Child>

子组件接收

let {
  name,
  age,
  json: { x },
} = this.props;

2.取值

let {
  name,
  age,
  json: { x },
  change
} = this.props;

3.全部传递给子组件

 <ChildChild {...this.props}></ChildChild>

4.super(props)

constructor(props) {
    // super()为了继承了，有了super(),构造函数才会有this
    // super(props) 是为了在constructor中有this.props,否则是undefined
    super(props);

    console.log(this.props);
    this.state = {
      name: this.props.name,
    };
  }

5.组件调用嵌套的内容是this.props.children

<Child {...this.state}  change={(name)=>this.changeName(name)}>
  <div>天道酬勤</div>
</Child>

Child.jsx

{this.props.children}

6.传递方法

父组件

 <Child name={name} age={age} json={json} change={(e)=>this.changeName(e)}></Child>

子组件

 <button onClick={()=>this.props.change('貂蝉')}>貂蝉</button>

7.state和props的区别：

state:组件自己的状态；可以直接修改，但是需要通过setState()进行修改
props:父组件传递过来的数据；props是只读的，不能修改，如果要修改，需要子传父。

2.组件通信

父传子：父组件通过自定义属性传值，子组件通过props接收

父组件：

 <Goods goods={this.state.goods} ></Goods>

子组件：

import React from 'react'

export default function Child(props) {
    return (
        <div>
            {
                props.goods.map(item=>{
                    return (
                        <div key={item.id}>{item.name} <button onClick={()=>props.del(item.id)}>删除</button> </div>
                    )
                })
            }
        </div>
    )
}

子传父：父组件将方法通过属性传递，子组件通过props接收

父组件传递方法：

<Goods  del={(id)=>this.del(id)}></Goods>

子组件触发：

 <div key={item.id}>{item.name} <button onClick={()=>props.del(item.id)}>删除</button> </div>

3.生命周期

/* 初始期
constructor:初始化数据
static getDerivedStateFromProps()  渲染之前二次修改state
    1.constructor中需要有state初始值；
    2.返回一个新的state
    3. 
render() 渲染期：加载DOM节点
componentDidMount() 挂载完成：开请求、计时器、操作dom，给window和document加事件
*/

/* 更新期 ：state
static getDerivedStateFromProps()  渲染之前二次修改state
    1.constructor中需要有state初始值；
    2.返回一个新的state
    3.如果不修改state，返回null
shouldComponentUpdate 判断要不要更新
    1.如果写了，没有返回值，会报错的
    2.return true ,正常更新
    3.return falsel, 就不会触发render
render() 渲染期：进行diff算法，计算出最优的更新方案，然后局部更新
componentDidUpdate() 更新完成
*/
/*销毁期
componentWillUnmount ：销毁之前：清除计时器 清除window和document上的事件
*/

4.表单

1.受控组件

特点：

就地反馈，如：验证
禁用按钮 如：提交
执行特定的输入格式 如：身份证号、银行卡号

取值赋值

特征	取值	赋值
Input type="text"	e.target.value	value
Input type="radio"	e.target.value	checked
Input type="checkbox"	e.target.value |e.target.checked	checked
Select	e.target.value	Value
Textarea	e.target.value	Value

//修改user
  changeUser(e, key) {

    let value = e.target.value;

    if(key==="tel"){
        let {tel}=this.state.user
        if(tel.length<3&&value.length===3){
            value+=" "
        }
        if(tel.length<8&& value.length===8){
            value+=" "
        }
        if(value.length>13){
            value=value.slice(0,13)
        }
    }

    if (key === "hobby") {
      //取出原来的hobby,如果这次e.target.checked是true，就将e.target.value添加到hobby数组中；
      //如果是false,将e.target.value从hobby中删除
      let { hobby } = this.state.user;
      let val=parseInt(e.target.value)
        if(e.target.checked){
            hobby.push(val)
        }else{
            hobby.splice(hobby.indexOf(val),1)
        }
        value=hobby
    }
    //如果是isAgree
    if(key==="isAgree"){
        value=e.target.checked;
    }

    this.setState({
      user: {
        ...this.state.user,
        [key]: value,
      },
    });
  }

2.非受控组件

this.name=React.createRef()
 this.pass=React.createRef()

<div className="box">
  <h4>login3</h4>
  <div>账号：<input type="text" ref={this.name} /></div>
  <div>密码：<input type="text" ref={this.pass}/></div>
  <button onClick={()=>this.login()}>登录</button>
</div>

 //登录3
login(){
  console.log(this.name.current.value);
  console.log(this.pass.current.value);
}

3.对比受控和非受控组件

特征	受控组件	非受控组件
一次性检索（例如表单提交）	是	是
及时验证	是	否
有条件的禁用提交按钮	是	否
执行输入格式	是	否
一个数据的几个输入	是	否
动态输入	是	否

5.ref

1.获取DOM节点

constructor(){
  super()

  //1.创建ref对象
  this.div=React.createRef();


}

<div ref={this.div}></div>

this.div.current.innerHTML="嘿嘿嘿";
this.div.current.style.background="pink";

2.获取子组件的实例

  // 2.创建ref给子组件
  this.child=React.createRef()

<Child ref={this.child}></Child>

click(){
  this.child.current.changeName("王昭君")
}

6.组件优化

1.componentWillUnmount

清除计时器

2.shouldComponentUpdate

父组件状态的改变，也会默认引起子组件的重新渲染，为了减少不必要的渲染，我们可以借助shouldComponentUpdate来实现。

情景1：父组件有很多状态，子组件用了部分状态，父组件只要有任何一个数据变了，子组件默认都会更新；

我们想要子组件用到的数据变了，子组件才更。

import React, { Component } from "react";

export default class ShouldChild extends Component {
  //判断状态是否更新
  shouldComponentUpdate(nextProps, nextState) {
    if (this.props.num === nextProps.num) {
      return false;
    }
    return true;
  }
  render() {
    console.log("child render is running  ...");
    let { num } = this.props;
    return (
      <div className="box">
        <h3>should child</h3>
        <div>num:{num}</div>
      </div>
    );
  }
}

3.PureComponent

场景：有一个父组件，有2个状态，date和num,date状态该组件自己使用，将num传递给子组件，此时我们希望只有num改变，子组件才再次重新渲染，除了上述的shouldComponentUpdate,我们也可以使用PureComponent来实现。

Component不会对数据进行比较，PureComponent将对props和state进行浅比较。

import React, { PureComponent } from 'react';


class Child2 extends PureComponent {
    render() {
        console.log("child2 render is running... ")
        return (
            <div className="box">
                <h1>child2：{this.props.num}</h1>
            </div>
        );
    }
}

export default Child2;

[注意]：

1.PureComponent是浅比较，如果子组件接收的是对象或者数组，需要使用拷贝才能引起子组件的渲染；

push(){
      let { arr } = this.state;
      arr.push({
        id: new Date().getTime(),
        name: "貂蝉",
      });
      this.setState({
          arr:[...arr],//子组件接收arr，子组件会更新
        	//arr 这种方式，子组件是不会触发渲染
      })
  }

2.如果prop和state每次都会变，那么PureComponent的效率还不如Component，进行浅比较也是需要时间；所以PureComponent 一般用在展示型组件上。

4.React.memo()

React.memo ，这个 API 可以说是对标类组件里面的 PureComponent ，这是可以减少重新 render 的次数的。

import React from 'react'

function Fn(props) {
    console.log("Memo 执行了");
    let {num,arr}=props;

    return (
        <div className="box">
            <h3>meno</h3>
            <div>num:{num}</div>
            <div>arr:{JSON.stringify(arr)}</div>
        </div>
    )
}
export default React.memo(Fn)

[注意]：React.memo()也是进行浅比较，对于对象和数组，同样的父组件需要使用拷贝才能引起其重新渲染。

5.Fragment

在React中，用React.Fragment组件能够在不额外创建DOM元素的情况下，让render()方法返回多个元素。你也可以使用<></>代替。

import React, { Component, Fragment } from "react";

class Item extends Component {
  render() {
    return (
      <Fragment>
        <li>测试1</li>
        <li>测试2</li>
      </Fragment>
    );
  }
}
export default class Mine extends Component {
  render() {
    return (
      <div>
        <h1>this is Mine </h1>
        <ul>
          <Item></Item>
        </ul>
      </div>
    );
  }
}

6.context

context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性.

context api给出三个概念：React.createContext()、Provider、Consumer.

1.语法介绍

React.createContext()

这个方法用来创建context对象，并包含Provider、Consumer两个组件 、

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

Provider

数据的生产者，通过value属性接收存储的公共状态，来传递给子组件或后代组件

<Provider value={/* some value */}>

Consumer

数据的消费者，通过订阅Provider传入的context的值，来实时更新当前组件的状态

<Consumer>
  {value => /* render something based on the context value */}
</Consumer>

2.举例

父组件：

// 1.创建一个Provider,Consumer对象
export let {Provider,Consumer}=React.createContext()

<div className="box">
  <h3>parent</h3>
  {/* 2.通过Provider提供数据，数据在value */}
  <Provider value={ {num:10,age:20} }>
    <Child></Child>
  </Provider>

</div>

子组件的子组件中

// 3.引入Consumer 
import {Consumer} from "./Parent"

<div className="box">
  <h3>child child</h3>

  {/* 4.使用数据 */}
  <Consumer>
    {
      (d)=>{
        return <div>{JSON.stringify(d)}</div>
      }
    }
  </Consumer>
</div>

7.错误边界处理

平时，我们在程序运行中，如果一旦报错，那么所有的程序都将暂停，并且所有的组件都不会出现在页面。如果项目上线，我们希望的实际如果某一个组件出现错误，其他组件正常运行，那么此时，我们需要使用componentDidCatch来实现。

封装ErrorBoundary组件

import React, { Component } from 'react';

class ErrorBoundary extends Component {
    state={
        hasError:false,
        error:null
    }
    componentDidCatch(error){
        this.setState({
            hasError:true,
            error
        })
    }
    render() {
        const {hasError,error}=this.state;
        return (
            <>
            {
                hasError?<div>很遗憾，此处加载错误</div>:this.props.children
            }
            </>
        );
    }
}

export default ErrorBoundary;

使用：

{/*错误边界处理*/}
<ErrorBoundary>
  <Error></Error>
</ErrorBoundary>

8.HOC高阶组件

HOC(Higher-order component)是一种React 的进阶使用方法，只要还是为了便于组件的复用。强调一点，HOC本身并不是 React API, 它就是一个方法，一个接收一个组件作为参数，返回一个增强的组件的方法。

1.语法

**
 * 1.高阶组件是一个函数
 * 2.参数是组件
 * 3.返回值也是组件
 */
const Fn = (C) => {
  return class extends Component {
    render() {
      return (
        <div className="box">
          <h3>此处是一个高阶组件</h3>
          <C {...this.props}></C>
        </div>
      );
    }
  };
};

//2个组件
class Com1 extends Component {
  render() {
    return <div>组件1</div>;
  }
}
class Com2 extends Component {
  render() {
    return <div>组件2</div>;
  }
}

//调用
const FnCom1 = Fn(Com1);
const FnCom2 = Fn(Com2);

2.案例

withRequest

import React, { Component } from 'react';
import axios from 'axios';
export default url => C => {
    return class H extends Component {
        constructor() {
            super()
            this.state = {
                arr: null
            }
        }
        componentDidMount() {
            axios.get(url).then(res => {
                this.setState({
                    arr: res.data.list
                })
            })
        }
        render() {
            let { arr } = this.state;
            return (
                <div>
                    {arr ? <C arr={arr}></C> : <div>正在加载中。。。</div>}
                </div>
            );
        }
    }
}