001.React的记录

Dear 丶 2022-04-27 22:20 176阅读 0赞

# React-demo #

react-demo: https://github.com/Zjingwen/react-demo
    欢迎git clone
    复制代码

# React的方法 #

## 生命周期详解 ##

### constructor 实例化 ###

class A extends React.Component{
    	constructor(){
    		super();
    	}
    }
    复制代码

*  实例化对象
 *  继承React.Component
 *  初始化state

### static getDerivedStateFromProps ###

class A extends React.Component{
    	static getDerivedStateFromProps(props,state){
    		return Object
    	}
    }
    复制代码

*  update更新时，render之前，dom渲染前
 *  必须有初始化state
 *  静态方法，没有this
 *  可以return出对象，设置state

class Count extends Component{
      constructor(props){
        super(props);
        this.state = {
          count: 0,
        }
      };
    
      static getDerivedStateFromProps(props){
        return {count: props.count*2};
      };
    
      render(){
        return (
          <React.Fragment>
            <p>Count-Child-state: {this.state.count}</p>
            <p>Count-Child-props: {this.props.count}</p>
          </React.Fragment>
        )
      }
    };
    
    class Time extends Component{
      constructor(props){
        super(props);
        this.state={
          time: this.props.time,
        }
      };
    
      static getDerivedStateFromProps(props,state){
        console.log(state);
        return null;
      };
    
      handleClick(){
        this.setState({
          time: new Date().toString()
        });
      }
    
      render(){
        const {time} = this.state;
        return(
          <React.Fragment>
            <input type='button' value='setState触发 详情看log' onClick={()=>this.handleClick()}/> 
            <p>{time}</p>
          </React.Fragment>
        )
      };
    };
    
    function GetDerivedStateFromPropsComponent (){
      const [count,setCount] = useState(0);
      const [time] = useState(new Date().toString());
    
      return (
        <Fieldset title='getDerivedStateFromProps'>
          <input type='button' value='new props ++' onClick={()=>setCount(s=>s+1)}/>
          <Count count={count}/>
          <Time time={time}/>
        </Fieldset>
      )
    };
    复制代码

### shouldComponentUpdate ###

class A extends React.Component{
    	shouldComponentUpdate(nextProps, nextState){
    		return Boolean
    	}
    }
    复制代码

*  update更新时，render之前，dom渲染前
 *  return 一个布尔值来判断是否渲染
 *  默认return true

class Time extends Component{
      shouldComponentUpdate(nextPorps){
        if(this.props.time !== nextPorps.time){
          // 保证每次time不同时更新
          console.group('shouldComponent-props');
          console.log(nextPorps);
          console.log(this.props);
          console.groupEnd();
          return true;
        }
        return false;
      };
      
      render(){
        return(
          <React.Fragment>
            {this.props.time}
          </React.Fragment>
        )
      }
    };
    
    function ShuldComponentUpdateComponent() {
      const [time,setTime] = useState(new Date().toString());
    
      return(
        <Fieldset title='shuldComponentUpdate'>
          <input type='button' value='new Props' onClick={()=>setTime(new Date().toString())} />
          <Time time={time}/>
        </Fieldset>
      )
    };
    复制代码

### render ###

class A extends React.Component{
    	render(){
    		return JSX
    	}
    }
    复制代码

*  将jsx渲染为真实DOM

### getShapshotBeforeUpdate ###

class A extends React.Component{
    	getShapshotBeforeUpdate(prevProps,prevState){
    		return ‘getShapshotBeforeUpdate’
    	}
    	componentDidUpdate(prevProps,prevState,snapshot){
    	   // TODO snapshot == ‘getShapshotBeforeUpdate’
    	}
    }
    复制代码

*  update更新时，render之前，dom渲染前
 *  无默认返回值，可返回null
 *  return 一个值，用来作为componentDidUpdate的第三个参数

class Child extends Component {
      constructor(props) {
        super(props);
        this.state = {
          ...props,
        };
      }
    
      getSnapshotBeforeUpdate(prevProps, prevState) {
        console.group('getSnapshotBeforeUpdate');
        console.log(prevProps);
        console.log(prevState);
        console.groupEnd();
        if (prevProps.time !== prevState.time) {
          this.setState({
            time: prevProps.time,
          });
        }
        return 'getSnapshotBeforeUpdate';
      }
    
      componentDidUpdate(prevProps, prevState, snapshot) {
        console.group('componentDidUpdate');
        console.log(prevProps);
        console.log(prevState);
        console.log(snapshot);
        console.groupEnd();
      }
    
      render() {
        return (
          <p>
            {this.state.time}
          </p>
        );
      }
    }
    
    function GetShapshotBeforeUpdateComponent() {
      const [time, setTime] = useState(new Date().toString());
    
      return (
        <Fieldset title='getShapshotBeforeUpdate'>
          <Child time={time} />
          <input type='button' value='更新时间' onClick={()=>setTime(new Date().toString())} />
        </Fieldset>
      );
    }
    复制代码

### componentDidMount ###

class A extends React.Component{
    	componentDidMount(){}
    }
    复制代码

*  render之后，dom渲染后
 *  唯一的会在服务端渲染调起的生命周期钩子函数。

class Time extends Component {
      componentDidMount() {
        console.log('ComponentDidMount');
      }
    
      render() {
        return (
          <p>{new Date().toString()}</p>
        );
      }
    }
    
    function ComponentDidMountComponent() {
      const [show, setShow] = useState(false);
      return (
        <Fieldset title='componentDidMount'>
          <input type='button' value='触发componentDidMount' onClick={()=>setShow(!show)} />
          { show && <Time />}
        </Fieldset>
      );
    }
    复制代码

### componentDidUpdate ###

class A extends React.Component{
    	componentDidUpdate(prevProps,prevState,snapshot){}
    }
    复制代码

*  update更新时，render之后，dom渲染后
 *  snapshot为getShapshotBeforeUpdate的return

参照getShapshotBeforeUpdate的code demo
    复制代码

### componentWillUnmount ###

class A extends React.Component{
    	componentWillUnmount(){}
    }
    复制代码

*  dom卸载

class Time extends Component {
      componentWillUnmount() {
        console.log('componentWillUnmount');
      }
      render() {
        return (
          <p>{new Date().toString()}</p>
        );
      };
    }
    
    function ComponentWillUnmountComponent() {
      const [show, setShow] = useState(true);
      return (
        <Fieldset title='componentWillUnmount'>
          <input type='button' value='触发componentWillUnmount' onClick={()=> setShow(!show)} />
          {show && <Time />}
        </Fieldset>
      );
    }
    复制代码

### componentDidCatch ###

class A extends React.Component{
        componentDidCatch(error,errorInfo){}
    }
    复制代码

*  只有在render中报错才会被捕获
 *  为什么不用try/catch：try/catch更加适合命令式代码，而componentDidCatch会捕获组件树中的报错

class ErrorBoundary extends Component {
      constructor(props) {
        super(props);
        this.state={
          error: false,
          errorInfo: null,
        };
      }
    
      componentDidCatch(error, errorInfo) {
        console.log(errorInfo.componentStack);
        this.setState({
          error: error.toString(),
          errorInfo: errorInfo.componentStack,
        });
      }
    
      render() {
        if (this.state.error) {
          return (
            <div>
              <h1>error: {this.state.error}</h1>
              <p>
                errorInfo:{this.state.errorInfo}
              </p>
            </div>
          );
        }
        return this.props.children;
      }
    };
    ErrorBoundary.propTypes = {
      children: PropTypes.node.isRequired,
    };
    
    class Input extends Component {
      constructor() {
        super();
        this.state= {
          throw: false,
        };
      }
    
      handleClick() {
        this.setState((s)=>({
          throw: !s.throws,
        }));
      }
    
      render() {
        if (this.state.throw) throw new Error('I throw');
        return <input type='button' value='触发catch' onClick={()=> this.handleClick()} />;
      }
    };
    
    function ComponentDidCatchComponent() {
      return (
        <Fieldset title='componentDidCatch'>
          <ErrorBoundary>
            <Input />
          </ErrorBoundary>
        </Fieldset>
      );
    };
    复制代码

## 触发流程 ##

### 初始化 ###

constructor()
    static getDerivedStateFromProps(props,state)
    render()
    componentDidMount()
    复制代码

class Flow extends React.Component{
      constructor(){
        super();
        this.state = {};
        console.group('初始化阶段');
        console.log('constructor');
      };
    
      static getDerivedStateFromProps(){
        console.log('getDerivedStateFromProps');
        return null;
      };
    
      componentDidMount(){
        console.log('componentDidMount');
        console.groupEnd();
      }
      
      render(){
        console.log('render');
        return (
          <p>
            constructor<br/>
            |<br/>
            static getDerivedStateFromProps()<br/>
            |<br/>
            render<br/>
            |<br/>
            componentDidMount<br/>
          </p>
        )
      };
    }
    
    
    function MountingComponent (){
      const [show,setShow] = useState(false);
    
      return (
        <Fieldset title='初始化阶段'>
          <input type='button' value='查看初始化阶段，详情看log' onClick={()=>setShow(!show)}/>
          {show && <Flow/>}
        </Fieldset>
      )
    };
    复制代码

### 属性更新 ###

New Props

static getDerivedStateFromProps(props,state)
    shouldComponentUpdate(nextProps, nextState)
    render()
    getSnapshotBeforeUpdate(prevProps,prevState)
    componentDidUpdate()
    复制代码

class Flow extends React.Component{
      state = {};
    
      static getDerivedStateFromProps(){
        console.group('触发传递新的props');
        console.log('getDevivedStateFromProps');
        return null;
      };
    
      shouldComponentUpdate(){
        console.log('shouldComponentUpdate');
        return true;
      };
    
      getSnapshotBeforeUpdate(){
        console.log('getSnapshotBeforeUpdate');
        return null;
      };
    
      componentDidUpdate(){
        console.log('componentDidUpdate');
        console.groupEnd();
      };
    
      render(){
        console.log('render');
        return(
          <React.Fragment>
            <p>{this.props.title}</p>
            <p>
              static getDevivedStateFromPorps <br/>
              | <br/>
              shouldComponentUpdate <br/>
              | <br/>
              getSnapshotBeforeUpdate <br/>
              | <br/>
              componentDidUpdate
            </p>
          </React.Fragment>
        )
      }
    };
    
    function NewpropsComponent(){
      const [time,setTime] = useState(new Date().toString());
    
      return (
        <Fieldset title='传递新的props'>
          <input type='button' value='触发传递新的props' onClick={()=>setTime(new Date().toString())}/>
          <Flow title={time}/>
        </Fieldset>
      )
    };
    
    export default NewpropsComponent;
    复制代码

setState()

static getDerivedStateFromProps()
    shouldComponentUpdate()
    render()
    getSnapshotBeforeUpdate()
    componentDidUpdate()
    复制代码

class SetStateComponent extends React.Component{
      state = {
        time: new Date().toString(),
      };
      
      static getDerivedStateFromProps(){
        console.group('设置属性');
        console.log('getDerivedStateFromProps');
        return null;
      };
    
      shouldComponentUpdate(){
        console.log('shouldComponentUpdate')
        return true;
      };
    
      getSnapshotBeforeUpdate(){
        console.log('getSnapshotBeforeUpdate');
        return null;
      };
    
      componentDidUpdate(){
        console.log('componentDidUpdate');
        console.groupEnd();
      };
    
      handleClick(){
        this.setState({
          time: new Date().toString()
        });
      }
    
      render(){
        console.log('render');
        return (
          <Fieldset title='设置属性'>
            <input type='button' value='更新时间' onClick={()=>this.handleClick()} />
            <p>{this.state.time}</p>
            static getDerivedStateFromProps <br />
            | <br />
            shouldComponentUpdate <br />
            | <br />
            render <br />
            | <br />
            getSnapshotBeforeUpdate <br />
            | <br />
            componentDidUpdate <br />
          </Fieldset>
        )
      }
    }
    复制代码

forceUpdate()

getDerivedStateFromProps()
    render()
    getShapshotBeforeUpdate()
    componentDidUpdate()
    复制代码

class ForceUpdateComponent extends React.Component{
      state = {};
    
      static getDerivedStateFromProps(){
        console.group('forecUpdate更新');
        console.log('getDerivedStateFromProps');
        return true;
      };
    
      getSnapshotBeforeUpdate(){
        console.log('getShapshotBeforeUpdate');
        return null;
      };
    
      componentDidUpdate(){
        console.log('componentDidUpdate');
        console.groupEnd();
      }
    
      render(){
        console.log('render')
        return(
          <Fieldset title='forecUpdate更新'>
            <input type='button' value='触发forecUpdae' onClick={()=>this.forceUpdate()} /> <br/>
            static getDerivedStateFromProps <br/>
            | <br/>
            getShapshotBeforeUpdate <br/>
            | <br/>
            componentDidUpdate <br/>
          </Fieldset>
        )
      }
    }
    复制代码

## 触发生命周期的api ##

### setState 设置状态 ###

setState((State)=>({object}),function callback])
    复制代码

// 完全写法
    this.setState(State=>({
        ...State
    }),()=>{
        ...
    })
    
    // 简单写法
    this.setState({
        ...
    })
    复制代码

*  触发一轮生命周期`getDerivedStateFromProps->shouldComponentUpdate->render->getSnapshotBeforeUpdate->componentDidUpdate`
 *  prevState为当前组件的state值
 *  callback，为状态设置之后，state经过所有生命周期后调用

### forceUpage 强制更新 ###

forceUpage(function callback)
    复制代码

this.forceUpage(()=>{
        ...
    })
    复制代码

*  触发一轮生命周期`getDerivedStateFromProps->render->componentDidUpdate`
 *  callback，为生命周期之后调用

## React.Component ##

*  react的抽象基础类

class A extends React.Component{}
    复制代码

## React.PureComponent ##

*  内置一个浅比较，比较props和state，决定是否render，用于提高性能
 *  只是进行浅对比，无法对比复合数据
 *  用于避免无状态组件的重复渲染

class A extends React.PureComponent{}
    复制代码

## React.memo(()=>\{\},()=>\{\}); ##

*  组件仅在它的 props 发生改变的时候进行重新渲染
 *  和React.PureComponent类似功能一直，但这是一个纯函数用法
 *  只是进行浅对比，无法对比复合数据

const A = React.memo((props)=>{
        return JSX
    },(prevProps,nextProps)=>{
        return null | false
    })
    复制代码

## React.createRef() ##

*  创建节点引用
 *  通过ref属性附加到React元素
 *  可以通过curent访问到节点
 *  ref更新发生在componentDidMount、componentDidUpdate时
 *  无法在函数组件上使用，因为没有实例

class CreateRefComponent extends Component {
      constructor() {
        super();
        this.state = {
          el: null,
        };
        this.ref = React.createRef();
      }
    
      componentDidMount() {
        this.setState({
          el: this.ref.current.innerHTML,
        });
      }
    
      render() {
        return (
          <Fieldset title='createRef'>
            <div ref={this.ref}>createRef</div>
            <p>el: {this.state.el}</p>
          </Fieldset>
        );
      }
    }
    复制代码

## React.isValidElement(object) ##

*  验证对象是否为React元素。返回true或false。
 *  必须传递一个对象

let D = React.createElement('div');
    React.isValidElement(D);
    复制代码

## React.Children ##

*  遍历children，返回数组

array React.Children.map(children,function callback) 
    复制代码

class Map extends Component {
      render() {
        const arr = React.Children.map(this.props.children, (v)=> v);
    
        return (
          <Fieldset title='map'>
            {arr}
          </Fieldset>
        );
      }
    };
    Map.propTypes = {
      children: PropTypes.node.isRequired,
    };
    
    function Index() {
      return (
        <Map>
          <p>A</p>
          <p>B</p>
          <p>C</p>
          <p>D</p>
          <p>E</p>
          <p>F</p>
        </Map>
      );
    };
    复制代码

*  遍历children，无返回

void React.Children.forEach(children,function callback) 
    复制代码

class ForEact extends Component {
      render() {
        const arr = [];
        React.Children.forEach(this.props.children, (v) => arr.push(v));
        return (
          <Fieldset title='ForEact'>
            {arr}
          </Fieldset>
        );
      }
    };
    ForEact.propTypes = {
      children: PropTypes.node.isRequired,
    };
    
    function Index() {
      return (
        <ForEact>
          <p>A</p>
          <p>B</p>
          <p>C</p>
          <p>D</p>
          <p>E</p>
          <p>F</p>
        </ForEact>
      );
    };
    复制代码

*  返回children的长度

number React.Children.count(children) 
    复制代码

class Count extends Component {
      render() {
        const count = React.Children.count(this.props.children, (v)=> v);
    
        return (
          <Fieldset title='count'>
            {count}
          </Fieldset>
        );
      }
    };
    Count.propTypes = {
      children: PropTypes.node.isRequired,
    };
    
    function Index() {
      return (
        <Count>
          <p>A</p>
          <p>B</p>
          <p>C</p>
          <p>D</p>
          <p>E</p>
          <p>F</p>
        </Count>
      );
    };
    复制代码

*  判断children是否为1，不为1报错

void React.Children.only(children) 
    复制代码

class Only extends Component {
      render() {
        const {title} = this.props;
    
        let e = null;
        let o = null;
    
        try {
          o = React.Children.only(this.props.children);
        } catch (error) {
          e = error;
        };
        return (
          <Fieldset title={title}>
            {e && Object.keys(e).map((v) => e[v])}
            {o}
          </Fieldset>
        );
      }
    };
    Only.propTypes = {
      children: PropTypes.node.isRequired,
      title: PropTypes.string.isRequired,
    };
    
    function Index() {
      return (
        <React.Fragment>
          <Only title='not-Only'>
            <p>A</p>
            <p>B</p>
            <p>C</p>
            <p>D</p>
            <p>E</p>
            <p>F</p>
          </Only>
          <Only title='Only'>
            <p>A</p>
          </Only>
        </React.Fragment>
      );
    };
    复制代码

*  把children，从对象转换为数组

array React.Children.toArray(children,function callback)
    复制代码

class ToArray extends Component {
      render() {
        const arr = React.Children.toArray(this.props.children);
    
        return (
          <Fieldset title='toArray'>
            <p>isArray: {Array.isArray(arr).toString()}</p>
            {arr}
          </Fieldset>
        );
      }
    };
    ToArray.propTypes = {
      children: PropTypes.node.isRequired,
    };
    
    function Index() {
      return (
        <ToArray>
          <p>A</p>
          <p>B</p>
          <p>C</p>
          <p>D</p>
          <p>E</p>
          <p>F</p>
        </ToArray>
      );
    };
    复制代码

## React.Fragment ##

*  允许创建一对React.Fragment的元素，这样就不用额外创建用于包裹的元素

// 完全写法
    render(){
        return(
            <React.Fragment>
                hello React
            </React.Fragment>
        )
    }
    
    // 缩略写法
    render(){
        return(
            <>
                hello React
            </>
        )
    }
    复制代码

## React.createElement ##

*  创建react对象

React.createElement(
      type,
      [props],
      [...children]
    );
    复制代码

class Hello extends React.Component {
      render() {
        return React.createElement('div', null, `Hello ${this.props.toWhat}`);
      }
    }
    
    ReactDOM.render(
      React.createElement(Hello, {toWhat: 'World'}, null),
      document.getElementById('root')
    );
    复制代码

## React.createFactory ##

*  返回一个React元素的函数。

React.createFactory({
      type,
      [props],
      [...children]
    })
    复制代码

function createFactory() {
      const li = React.createFactory('li');
      const Child1 = li(null, 'child-1');
      const Child2 = li(null, 'child-2');
    
      const Root = React.createElement('ul', '', Child1, Child2);
    
      return (
        <Fieldset title='createFactory'>
          {Root}
        </Fieldset>
      );
    }
    复制代码

## React.cloneElement ##

*  克隆并返回一个新的React元素

React.cloneElement({
        type,
        [props],
        [...children]
    })
    复制代码

class C extends React.Component {
      render(){
        var D = React.createElement('div');
        return React.cloneElement(
          D,
          null,
          'hello React'
        );
      }
    }
    复制代码

## React.forwordRef(props,ref) ##

`TODO @jingwen 需要独立文章分析`

*  引用转发ref给组件

React.forwordRef(props,ref)
    复制代码

// 简单用法
    function Input(props) {
      const {forwardRef} = props;
      return (
        <input type='input' defaultValue='输入框' ref={forwardRef} />
      );
    };
    Input.propTypes = {
      forwardRef: propTypes.object,
    };
    Input.defaultProps={
      forwardRef: {},
    };
    
    class ForwardRefComponent extends Component {
      constructor() {
        super();
        this.state = {
          refs: React.createRef(),
        };
      }
    
      handleFocus() {
        const {refs: {current}} = this.state;
        current.focus();
      }
    
      render() {
        const {refs} = this.state;
        const FancyInput = React.forwardRef((props, ref)=>{
          return <Input forwardRef={ref} />;
        });
    
        return (
          <Fieldset title='forwardRef-简单用法'>
            <FancyInput ref={refs} />
            <input type='button' value='获取焦点' onClick={()=>this.handleFocus()} />
          </Fieldset>
        );
      }
    }
    复制代码

// 转发ref给后代
    function wrapped(Component) {
      class Wrapped extends React.Component {
        render() {
          const {forwardedRef, ...props} = this.props;
          return <Component ref={forwardedRef} {...props} />;
        }
      }
      return React.forwardRef((props, ref) => {
        return <Wrapped {...props} forwardedRef={ref} />;
      });
    }
    
    class Input extends React.Component {
      constructor(props) {
        super(props);
        this.ref = React.createRef();
      };
    
      handleFocus() {
        const {current} = this.ref;
        current.focus();
      }
    
      render() {
        const props = this.props;
        return (
          <input type='input' defaultValue={props.value} ref={this.ref} />
        );
      }
    }
    
    class Hoc extends React.Component {
      constructor() {
        super();
        this.state = {
          refs: React.createRef(),
        };
      };
    
      handleFocus() {
        const {refs: {current}} = this.state;
        current.handleFocus();
      }
    
      render() {
        const {refs} = this.state;
        const InputHoc = wrapped(Input);
    
        return (
          <Fieldset title='forwardRef-hoc-用法'>
            <InputHoc value='forwardRef-hoc-用法' ref={refs} />
            <input type='button' value='获取焦点' onClick={()=>this.handleFocus()} />
          </Fieldset>
        );
      }
    };
    复制代码

## React.lazy or React.Suspense ##

*  React.lazy，动态导入组件
 *  React.Suspense，等待导入时的显示

class TimeClass extends React.Component {
      render() {
        const Time = new Date().toString();
        return <div>lazy-time-class: {Time}</div>;
      };
    };
    
    export default TimeClass;
    复制代码

function TimeFun() {
      const Time = new Date().toString();
      return (<div>lazy-time-fun: {Time}</div>);
    };
    
    export default TimeFun;
    复制代码

## React.StrictMode ##

*  给组件的任何部分开启严格模式
 *  识别具有不安全生命周期的组件
 *  关于遗留字符串ref API使用的警告
 *  关于已弃用的findDOMNode用法的警告
 *  检测意外的副作用
 *  检测遗留上下文API

class Index extends Component {
      render() {
        return (
          <Fieldset title='StrictMode'>
            <StrictMode>
              StrictMode
            </StrictMode>
          </Fieldset>
        );
      }
    };
    复制代码

## Context ##

*  组件设置全局参数
 *  createContext，设置context的默认值

const A = React.createContext('aaaa');
    复制代码

*  Context.Provider，允许组件订阅该context的参数
 *  Class.contextType，设置当前组件订阅的context。当找不到Provider的时候使用。context值可以在componentDidMount、componentUpdate、componentWillUnmount、render中获取

// 两种设置形式
    const context = React.createContext('aaa');
    class A extend React.Component{
        static contextType = context;
    }
    
    class B extend React.Component{
    
    }
    B.contextType = context;
    复制代码

*  Context.Consumer，

// 简单例子
    const ThemeContext = React.createContext('light');
    
    class ThemedButton extends React.Component {
      static contextType = ThemeContext;
      render() {
        return <input defaultValue={this.context} type='input' />;
      }
    }
    
    function Toolbar(props) {
      return (
        <div>
          <ThemedButton />
        </div>
      );
    }
    
    class Index extends Component {
      render() {
        return (
          <Fieldset title='context'>
            <Toolbar />
            <ThemeContext.Provider value="dark">
              <Toolbar />
            </ThemeContext.Provider>
          </Fieldset>
        );
      }
    }
    复制代码

*  Consumer，设置多个上下文

## ReactDOM.createPortal ##

ReactDOM.createPortal(
        React.Component | JSX, // react组件
        element,// 节点元素
    );
    复制代码

## defaultProps ##

*  设置props的默认值

class A extends React.Component{
        constructor(props){
            super(props);
            console.log(props)
        };
        
        // 集成写法
        static defaultProps = {
            test: 'test',        
        };
    }
    
    // 外置写法
    A.defaultPorps = {
        test: 'test',
    }
    复制代码

## PropTypes ##

TODO
    复制代码

# Render Props #

*  解决组件交叉使用问题

# React的事件池 #

TODO
    复制代码

# Hooks #

## useState 状态钩 ##

*  用来设置和更新状态

const [状态变量,更新函数] = useState(默认值)
    复制代码

function A(){
      const [count, setCount] = useState(0);
    
      return(
        <React.Fragment>
          <p>Count: {count}</p>
          <button onClick={()=>{
        setCount(count+1)}}>++</button>
          <button onClick={()=>{
        setCount(count-1)}}>--</button>
        </React.Fragment>
      )
    };
    复制代码

## useEffect(function,\[\]) 效果钩 ##

useEffect(()=>{
        // componentDidMount
        // componentDidUpdate
        return ()=>{
            // componentWillUnmount
        }
    },[]);
    复制代码

*  useEffect是componentDidMount、componentDidUpdate、componentWillUnmount的结合。
 *  默认情况下，useEffect，会在每次componentDidMount、componentDidUpdate时执行。
 *  可以拿到DOM结构

*  如何在组件compoenntWillUnmount时触发useEffect

*  利用第二个参数，让useEffect不会过度渲染
 *  为空数组，表示不依赖props或者state，将不会更新
 *  数组内表示当新的赋值，如果新值和旧值不想等，就更新

## useLayoutEffect(function,\[\]) ##

*  DOM渲染前反应的钩子
 *  基本配置和useEffect一致

## useContext(createContext) ##

*  参数在所有子组件中都能获取

## useReducer(reducer,initialState) ##

*  类似redux的功能

const [state,dispatch] = useReducer(reducer,initialState,{action});
    // const [属性,动作] = useReducer(动作函数,初始值属性,初始动作);
    // 如何触发：dispatch(type);
    复制代码

## useCallback(()=>\{\},\[\]) ##

*  返回一个记忆的memoized，默认情况下会记录上一次传递的值
 *  可以替代shouldComponentUpdate使用

*  保存事件，让组件不会重复创建新方法，当你重复点击时，InputComponentState的handleClick的事件总是由组件新创建的。而InputComponentCallback的handleClick会被记忆下来，不会新创建。有利于提高性能。

## useMemo(function,\[\]) ##

*  和useCallback基本一致，我还没发现有什么区别Q。Q

## useRef() ##

*  返回一个ref对象，这个对象将维持在组件的整个生命周期

## useImperativeMethods(ref,()=>(\{\})) ##

*  向父组件公开ref实例
 *  只能应用于forwardRef(props,ref)

## useMutationEffect(function,\[\]) ##

*  和useEffect、useLayoutEffect类似
 *  useMutationEffect会在更新阶段触发

# HOC 高级组件 #

解释

*  一个参数为React组件的函数，并且返回一个新函数，一个类工厂。

优点

*  高内聚，低耦合
 *  代码复用，高度模块化

基本用途

*  增删改props
 *  渲染劫持

公式

React.Component function WrappedComponent(React.Component:Component)
    复制代码

简单例子

注意

*  不要改变原始组件，使用组合的形式

// 错误示范
    // WrappedComponent 中会覆盖组件的componentDidMount方法
    // 而且使用者必须要知道被覆盖方法的具体用途，才能避免方法冲突覆盖
    
    function WrappedComponent(Wrapped) {
      Wrapped.prototype.componentDidMount = ()=>{
        console.log('WrappedComponent');
      };
    
      return Wrapped;
    };
    
    class Child extends React.Component{
      componentDidMount(){
        console.log('Child');
      }
      render(){
        return <div>hello React</div>};
    };
    
    class App extends React.Component{
      render(){
        const HOCchild = WrappedComponent(Child);
    
        return(
          <React.Fragment>
            <HOCchild />
          </React.Fragment>
        )
      }
    };
    复制代码

// 正确示范
    function wrappedComponent(Wrapped){
        return class React.Component{
            componentDibMount(){
                console.log('componentDibMount')
            }
        };
    };
    复制代码

*  不要直接修改HOC的props，最好独立变量

// 错误示范
    // props中可能包含太多多余的属性，无法确保高阶组件的灵活度和可重用性
    function WrappedComponent(Wrapped){
        return class React.Component{
            return <Wrapped {...this.props}/>
        }
    }
    复制代码

// 正确
    function WrappedComponent(Wrapped){
        return class React.Component{
            const {detail} = this.props;
            return <Wrapped {...detail} />
        }
    }
    复制代码

*  包装显示名称，便于调试

*  不要在render函数中使用高阶组件

TODO
    复制代码

*  必须将静态方法做拷贝

TODO
    复制代码

*  Refs属性不能传递

TODO
    复制代码

# 无ES6创建React Component #

*  create-react-class

TODO
    复制代码

# 动态引入 dynamic import #

*  React Loadable