React 实用进阶合集（2）

1、异步加载组件 ？

• 常规 这几个 配合一起使用
• 举例子 演示一下

• 建议调网速 为 3G 即可看到 loading效果

2、React性能优化 ?

1、有一个 生命周期叫 ShouldComponentUpdate 问题在哪 ？

• 下面这个是基本内容

* 注意使用 这个方法 优化 组件渲染时， 常规 放在 子组件内部使用 ,决定是否在父组件更新时 ，也更新子组件

2、SCU默认返回什么 ？

• return true
• 这个是什么意思呢 ？ react 默认 父组件更新 子组件 也会更新 （不管子组件有没有发生变化）

3、写个例子

• 会不断触发 更新

• 使用 该方法 后

4、SCU一定要配合不可变值 ?

• 不可变值 举例说明一下

• 使用 push 无法 正常 工作

• 注意 深层比较需要考虑 深度

5、PureComponent和memo 需要知道哪些内容

• 简单使用方法 展示

3、进阶部分 什么是React高阶组件HOC ？

1、先看HOC 基本定义

• 是个函数， 输入组件 输出 组件

import React from "react";

const HOCFactory = (Component) => {
  class HOC extends React.Component {
    render() {
      return <Component {...this.props} />;
    }
  }
  return HOC;
};

function Component1() {
  return <p>1</p>;
}

function Component2() {
  return <p>2</p>;
}

const Enhansce1 = HOCFactory(Component1);
const Enhansce2 = HOCFactory(Component2);

2、细化 实际案例展示

• 尝试实现 鼠标移动 然后 实时打印坐标

import React from "react";

const findMouse = (Component) => {
  class addMouse extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        x: 0,
        y: 0,
      };
    }
    handleMove = (event) => {
      this.setState({
        x: event.clientX,
        y: event.clientY,
      });
    };
    render() {
      return (
        <div onMouseMove={this.handleMove} style={{ height: "500px" }}>
          {/* 传递 所有props 增加 mouse属性  */}
          <Component {...this.props} mouse={this.state} />
        </div>
      );
    }
  }

  return addMouse;
};

const App = (props) => {
  const { x, y } = props.mouse; //此处接收到mouse 属性
  return (
    <div style={{ height: "500px" }}>
      <h1>
        The mouse position is ({x},{y})
      </h1>
    </div>
  );
};

export default findMouse(App);

• index.js 引入并使用

• 页面效果 非常nice

* 需要注意的事情 
  1、不需要引入 {Component}
  2、注意 高阶组件 结构 
  3、注意 公共逻辑 放在 内层 HOC 内的 

• 可以 传递更多的内容

3、connect是高阶组件 ？

4、进阶部分 React Render Props ？

• 完整代码展示

import React, { Component } from "react";

class Mouse extends Component {
  constructor(props) {
    super(props);
    this.state = {
      x: 0,
      y: 0,
    };
  }
  handleMove = (e) => {
    this.setState({
      x: e.clientX,
      y: e.clientY,
    });
  };
  render() {
    return (
      <div style={{ height: "500px" }} onMouseMove={this.handleMove}>
        {this.props.render(this.state)}
      </div>
    );
  }
}

const App_1 = (props) => (
  <div style={{ height: "500px" }}>
    <Mouse
      render={({ x, y }) => (
        <h1>
          The position is ({x},{y},{props.test})
        </h1>
      )}
    ></Mouse>
  </div>
);

export default App_1;

• index.js 使用效果

<App_1 test="666" />

• 页面展示效果

5、小结部分

• 将重要的部分列出来，方便进行针对性的学习和总结