React高阶组件

一、什么是高阶组件（Higher-Order Components）？

　高阶函数：至少满足以下条件之一：

• 接受一个或多个函数作为输入；
• 输出一个函数；

　高价组件官方定义：高阶组件是参数为组件，返回值为新组件的函数；

　　　　　作用：让属性、方法进行继承

　

/* 
    高阶组件

    // 高阶组件的作用 => 让属性进行继承
    // 作用1: 
    // 就是我们在封装组件的时候，发现我封装的这几个组件他们之间有一个属性，是相同的，我写一个高阶组件

    // 语法：就是一个函数，他的参数是是函数，返回值也是函数

    // 组件A， 组件B 这两个组件，他们之间有公共的属性

    // 比如组件A有定义的死的变量 let a=300


*/

import "./App.css";

function App() {
  return (
    <div className="App">
      <h2>高阶组件</h2>
        <NewChildrenA></NewChildrenA>
        <ChildrenB></ChildrenB>
    </div>
  );
}

//定义高阶组件=>本质=》高阶函数=》函数劫持

function HCom(Com) {
  function newf() {
    // 继承公共的属性
    let a = 300;
    const add = () => {
      console.log("添加");
    };
    return <Com a={a} add={add}></Com>;
  }
  return newf;
}


function ChildrenA(props){
  console.log(props,111111111)
  return (
    <div>ChildrenA {props.a}
    <button onClick={()=>props.add()}>添加</button>
    </div>
  )
};

let NewChildrenA=HCom(ChildrenA)


function ChildrenB(){
  let a=300;
  return(
    <div>ChildrenB</div>
  )
}

export default App;

/* 
  总结 高阶组件
    // 他是什么？ 他的本质就是一个高阶函数，他的参数是一个函数，他的返回值是一个函数

    // 作用？ 1 正向继承 =》 就是我们封装的组件继承 高阶组件上的属性

    // 为什么需要这个高阶组件？就是因为我们写react项目都是进行组件化开发，在某些模块中，我们封装的组件，他们之间可能有一些公共的属性，方便维护，我们就写成一个高阶组件


    // 用法 => 先定义高阶组件，在高阶组件定义公共的属性 => 在用自己封装的组件去继承

*/