react--context,高阶组件，hook

1，Context:不需要在任何组件间添加props方法，可以任意之间的组件树进行

const Context = React . createContext ();

const Provider = Context . Provider ; //提供者

const Consumer = Context . Consumer ; //消费者

function App () {

return (

< div className = "App" >

{ /* <HomePag {...store} /> */ }

< Provider value = { store } >

< Consumer >

{ ctx =>

<>

< div > { ctx . user . name } </ div >

< HomePag { ... ctx } />

</>

}

</ Consumer >

</ Provider >

</ div >

);

}

2，高阶组件

一个函数传入一个组件，返回另一个组件

子组件

function Child ( props ) {

return < div > Child- { props . name } </ div > ;

}

高阶组件

//这里的Cmp是function或者class组件

const foo = Cmp => props => {

// console.log("foo", Cmp);

return (

< div className = "border" >

< Cmp { ... props } />

</ div >

);

};

调用方式

// const Foo = foo(foo(Child)); // 链式调用

export default class HocPage extends Component {

render () {

return (

< div >

< h3 > HocPage </ h3 >

{ /* <Child name="msg" /> */ }

{ fooHost ( < div > omg </ div > ) }

{ /* <Foo name="msg" /> */ }

{ /* {foo(Child)({ name: "msg" })} */ }

</ div >

);

}

}

如果传入是一个标签，处理的方式有所不同

//处理原生标签

const fooHost = cmp => {

console . log ( "fooHost" , cmp );

// return cmp;//返回原先的标签

// return React.cloneElement(cmp, { className: "border" });

// return React.createElement(cmp.type, { ...cmp.props, className: "border" });

return < cmp.type { ... cmp . props } /> ;

// <div className="border">{/* <Cmp /> */}</div>;

};

如果采用的是链式调用，child是类,如果是链式调用可以使用装饰器@foo

// @foo

// @foo

// class Child extends Component {

// render() {

// return <div>Child-{this. props.name }</div>;

// }

// }

// const Foo = foo(foo(Child)); // 链式调用

React.cloneElement：浅复制

React.createElement：赋值

插槽

This.props. children

react的hook

Hook  是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

1、const [ count , setCount ] = useState ( 0 ) ;// 状态、函数

2、Effect Hook  可以让你在函数组件中执行副作用操作

  useEffect ( ( ) => {
    // Update the document title using the browser API
    document . title = `You clicked ${ count } times` ;
  } ) ;

3， useContext

4， useReducer  可以让你通过 reducer 来管理组件本地的复杂 state。