[JavaScript知识库]React基础实践大全

React基础实践大全

根据react全部api解读+基础实践大全（夯实基础万字总结！） 自己实操一遍（如有侵权，请留言）

react在线编辑器

我们把React,api 分为组件类、工具类、 hook、 react-dom 四大类；

组件类

三种类 1. 继承的基类组件(component) 2.react内置的组件(fragment) 3. 高阶组件(forwardRef memo)

Component & PureComponent

使用上述在线编辑器在app.js 文件中：

PureComponent 使用的是浅比较

import React from "react";
import "./styles.css";

class UserComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      user: {
        name: "root",
        age: 18
      }
    };
  }
  handleClick = () => {
    const { user } = this.state;
    user.age++;
    this.setState({ user });
  };
  render() {
    const { user } = this.state;
    return (
      <div className="contanior">
        <span>PureComponent</span>
        <div>姓名是{user.name}</div>
        <div>年龄是{user.age}</div>
        <button onClick={this.handleClick}>按钮{user.age}</button>
      </div>
    );
  }
}

class UserPureComponent extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      user: {
        name: "root",
        age: 18
      }
    };
  }
  handleClick = () => {
    const { user } = this.state;
    user.age++;
    this.setState({ user });
  };
  render() {
    const { user } = this.state;
    return (
      <div className="contanior">
        <span>Component</span>
        <div>姓名是{user.name}</div>
        <div>年龄是{user.age}</div>
        <button onClick={this.handleClick}>按钮{user.age}</button>
      </div>
    );
  }
}

export default function App() {
  return (
    <div className="App">
      <UserComponent />
      <UserPureComponent />
    </div>
  );
}

memo

React.memo(组件， 是否不更新 ) // true : 不更新 false: 更新
shouldComponentUpdate() 返回 // true 更新 false: 不更新

import React from "react";
import "./styles.css";

const NumberMemo = (props) => {
  console.log("刷新了");
  return <div class="contanior">memo{props.number}</div>;
};

const numberCallback = (pre, next) => {
  // true 不更新 false 更新
  if (pre.number === next.number) {
    return true;
  } else if (pre.number !== next.number && next.number > 5) {
    return true;
  } else {
    return false;
  }
};
const NumberMemoCompoent = React.memo(NumberMemo, numberCallback);
class NumberComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      number: 0
    };
  }
  render() {
    const { number } = this.state;
    return (
      <div class="contanior">
        当前number: {number}
        <button onClick={() => this.setState({ number: number + 1 })}>
          number++
        </button>
        <button onClick={() => this.setState({ number: number - 1 })}>
          number--
        </button>
        <NumberMemoCompoent number={number} />
      </div>
    );
  }
}

export default function App() {
  return (
    <div className="App">
      <NumberComponent />
    </div>
  );
}

forwardRef

1.转发引入ref 父组件是class 子组件是 function
2. 高阶组件转发 父组件是function 子组件是class

import React, { useEffect, useRef } from "react";
import "./styles.css";
function SonFunction(props) {
  return (
    <div>
      SonComponent
      <div ref={props.grandRef}>想要的子元素</div>
    </div>
  );
}

class FatherComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div className="contanior">
        FatherComponent
        <SonFunction grandRef={this.props.grandRef} />
      </div>
    );
  }
}
const NewFather = React.forwardRef((props, ref) => (
  <FatherComponent grandRef={ref} {...props} />
));
class GradpaComponent extends React.Component {
  constructor(props) {
    super(props);
    this.son = null;
  }
  componentDidMount() {
    console.log(this.son, `子元素`);
  }
  render() {
    return (
      <div className="contanior">
        <NewFather
          ref={(ref) => {
            this.son = ref;
          }}
        />
      </div>
    );
  }
}

class SonComponent extends React.Component {
  render() {
    return (
      <div>
        SonComponent
        <div>想要的子元素</div>
      </div>
    );
  }
}
function Hoc(Component) {
  class Wrap extends React.Component {
    render() {
      const { forwardRef, ...others } = this.props;
      return <Component ref={forwardRef} {...others} />;
    }
  }
  return React.forwardRef((props, ref) => <Wrap forwardRef={ref} {...props} />);
}
const FatherFunction = Hoc(SonComponent, true);
const GradpaFunction = () => {
  const node = useRef(null);
  useEffect(() => {
    console.log(`func, hoc`, node.current);
  }, []);
  return (
    <div className="contanior">
      <FatherFunction ref={node} />
    </div>
  );
};
export default function App() {
  return (
    <div className="App">
      <GradpaComponent />
      <GradpaFunction />
    </div>
  );
}

lazy && Suspense

React.lazy 和 Suspense 还不支持服务端渲染

import React from "react";
import Text from "./test";
import "./styles.css";
const LazyComponent = React.lazy(
  () =>
    new Promise((resolve) => {
      setTimeout(() => {
        resolve({ default: () => <Text /> });
      }, 1000);
    })
);
export default function App() {
  return (
    <div className="App">
      <React.Suspense fallback={<div className="icon"></div>}>
        <LazyComponent />
      </React.Suspense>
    </div>
  );
}

Fragment

export default function App() {
  return (
    <>
      <div className="App">111</div>
      <div className="App">222</div>
    </>
  );
}
// 唯一不同就是 有key 值
export default function App() {
  return (
   <React.Fragment key={"id"}>
      <div className="App">111</div>
      <div className="App">222</div>
  </React.Fragment>
  );
}

Profiler

import React from "react";
import "./styles.css";

export default function App() {
  const callback = (...args) => {
    console.log(args, `args`);
  };
  return (
    <React.Profiler id="root" onRender={callback}>
      /*代码组件*/
    </React.Profiler>
  );
}

检测性能 第一个参数是 id 唯一性标识 第二个参数是onRender 回调 用于渲染完成 …args 获取所有的参数

StrictMode

import React from "react";
import "./styles.css";

export default function App() {
  return (
    <React.StrictMode>
       /*代码组件*/
    </React.StrictMode>
  );
}

工具类

createElement

jsx 形式转为虚拟dom

import React from "react";
import "./styles.css";
const jsx = <div className="contanior">第一个</div>;
// 第一个参数标签的tag 第二个参数props 第三个参数children
const jsx2 = React.createElement("div", null, "第二个");
export default function App() {
  return (
    <>
      {jsx}
      {jsx2}
    </>
  );
}

cloneElement

import React from "react";
import "./styles.css";
function ChildComponent(props) {
  return (
    <div>
      名字{props.name} 年龄{props.age}
    </div>
  );
}
function ParentComponent({ children }) {
  const child = React.cloneElement(children, { age: 18 });
  return <div className="contanior">{child}</div>;
}
export default function App() {
  return (
    <div className="app">
      <ParentComponent>
        <ChildComponent name="child" />
      </ParentComponent>
    </div>
  );
}

createContext

Context.Provider Context.Consumer
<Context.Provider >传过去的值 在<Context.Consumer>的children 可以拿到

import React from "react";
import "./styles.css";
const myContext = React.createContext({});
const ChildComponent = (props) => {
  return (
    <div className="contanior">
      名字{props.name}
      年龄{props.age}
    </div>
  );
};
const ParentComponent = () => {
  return (
    <myContext.Consumer>
      {(value) => <ChildComponent {...value} />}
    </myContext.Consumer>
  );
};
export default function App() {
  const [value] = React.useState({ name: "名字", age: 18 });
  return (
    <div className="app">
      <myContext.Provider value={value}>
        <ParentComponent></ParentComponent>
      </myContext.Provider>
    </div>
  );
}

createFactory

createRef

isValidElement

children.map & children.count & children.toArray & children.only

import React from "react";
import "./styles.css";

function Test(props) {
  return <div className="contanoir">{props.name}</div>;
}
function WrapComponent({ children }) {
  // 操作children 这个隐藏的属性 需要用
  // children.map& children.forEach & children.count & children.toArray & children.only
  return <>{children}</>;
}
export default function App() {
  return (
    <div className="app">
      <WrapComponent>
        {["小1", "小2", "小3", "小4"].map((name) => (
          <Test name={name} />
        ))}
        <span>111</span>
      </WrapComponent>
    </div>
  );
}

react-hooks

「react进阶」一文吃透react-hooks原理
玩转react-hooks,自定义hooks设计模式及其实战
react-hooks如何使用？

react-dom

ReactDom.render

ReactDom.render(组件， 容器， callback)

ReactDom.hydrate

// 服务端渲染用这个方法
ReactDom.hydrate(组件， 容器， callback)

ReactDom.createPortal

ReactDom.createPortal(child, contanior)

unstable_batchedUpdates

// 批量更新
 ReactDOM.unstable_batchedUpdates(()=>{
      this.setState({ numer : this.state.numer + 1 })
      console.log(this.state.numer)
      this.setState({ numer : this.state.numer + 1 })
      console.log(this.state.numer)
      this.setState({ numer : this.state.numer + 1 })
      console.log(this.state.numer)
  }) 

ReactDom.flushSync

ReactDOM.flushSync(()=>{
    /* 此次更新将设置一个较高优先级的更新 */
    this.setState({ name: 'alien'  })
})

ReactDom.findDOMNode

推荐使用ref 这个不推荐使用

ReactDom.unmountComponentAtNode

 ReactDOM.unmountComponentAtNode(this.ref)