React--高阶组件

1.高阶组件初识 ：

原理：就是一个函数，接收一个或多个组件作为参数，返回一个新的组件。
作用：实现代码的复用

React中高阶组件实现的两种方式

1.属性代理: ① 操作属性props; ② 抽离state；③ 用其他元素包裹传入的组件；
2.反向继承:① 操作state ②渲染劫持。
渲染劫持：条件渲染、修改由render() 输出的React元素树

入门小例子 （1）

import React, {
    Component } from 'react';
// 高阶组件：一个函数，接收一个或多个组件作为参数，返回一个新的组件
// 作用，实现代码的复用


// 以下是将App组将传入了一个函数中，然后作为函数的返回值，包装成了另一个新组件的名字
function withCopyRight(WrappedComponent){
   
  // class 后面不写名字，叫做匿名class类
  return class extends Component{
   
    render(){
   
      return <WrappedComponent></WrappedComponent>
    }
  }
}
class App extends Component {
   
  render() {
   
    return (
      <div>
        <h1>App组件</h1>
      </div>
    );
  }
}

export default withCopyRight(App);    //##注意：这个地方不再是导出App了，而是导出返回的新组件

2. 属性代理—操作属性props

import React, {
    Component } from 'react';

function HigherOrderComponent(WrappedComponent){
   
  return class extends Component{
   
    render(){
   
      // 操作属性props;
      let newProps={
   
        msg:"😊",   //属性
        history:window.history   //方法
      }
      // 在这个组件上注入新的属性或方法,这样App上就会拥有这些属性了,我们在需要的时候就可以直接使用这些属性
      return <WrappedComponent {
   ...newProps}></WrappedComponent>
    }
  }
}
class App extends Component {
   
  render() {
   
    return (
      <div>
        App组件
      </div>
    );
  }
}

export default HigherOrderComponent(App);

3. 高阶组件–属性代理—状态抽离

目的 : 定义一个函数,经过这个函数处理的表单都是受控表单.
优点 : 这样做的好处,抽离了主组件的状态,就是即使页面有很多的input输入框,我们都可以直接让他受控, 而不用每一个
都分别去定义状态跟方法,感觉像封装函数一样,一次封装,后面直接调封装好的组件来使用就可以了

import {
    func } from 'prop-types';
import React, {
    Component } from 'react';

// 高阶组件----抽离state

// 状态抽离4个步骤:
// 1.将input抽离出来,变成一个单独的组件,但是这个组件不受控,所有我们就定义了一个高阶组件
const NameInput=(props)=>{
   
  return  <input type="text" value={
   props.value} onChange={
   props.handleChange}/>
}
// 2.在高阶组件中返回一个新的组件,我们在这个组件中定义属性跟方法
function withChange(WrappedComponent){
   
  return class extends Component{
   
    state={
   
      value:''