生命周期

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

组件的生命周期可分成三个状态：

  • Mounting：已插入真实 DOM
  • Updating：正在被重新渲染
  • Unmounting：已移出真实 DOM

生命周期的方法有

  • componentWillMount 在渲染前调用,在客户端也在服务端。
  • componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
  • componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
  • shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。可以在你确认不需要更新组件时使用。
  • componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
  • componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
  • componentWillUnmount在组件从 DOM 中移除之前立刻被调用。

    hooks

    userState
    useEffect
    useContext

    useContext可以帮助我们跨越组件层级直接传递变量，实现共享。 需要注意的是useContext和redux的作用是不同的！！！

useContext：解决的是组件之间值传递的问题

redux：是应用中统一管理状态的问题

但通过和useReducer的配合使用，可以实现类似Redux的作用。

useReducer

useState 的替代方案。它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法。（如果你熟悉 Redux 的话，就已经知道它如何工作了。）

在某些场景下，useReducer 会比 useState 更适用，例如 state 逻辑较复杂且包含多个子值，或者下一个 state 依赖于之前的 state 等。并且，使用 useReducer 还能给那些会触发深更新的组件做性能优化，因为你可以向子组件传递 dispatch 而不是回调函数 。

useCallback

返回一个memoized回调函数，我的理解即返回一个函数的句柄，等同于函数的变量，因此你可以使用memoizedCallback()进行执行该函数或者传递给事件和子组件，这里可以推荐绝大多数事件或者子组件的方法使用useCallback，避免组件更新重复渲染。 因此useCallback中的doSomething并不会在定义时就执行，而是需要手动调用返回的memoizedCallback才是真的执行。简单理解为useCallback定义了一个函数，仅在deps发生变化时重新定义该函数，否则该函数的变量不会变化，事件和子组件内容也就不用重新绑定或者渲染。

useMemo

作为性能优化的手段

useRef

useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。常见访问子组件

useImperativeMethods
useMutationEffect
useLayoutEffect

其函数签名与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用 effect。可以使用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前，useLayoutEffect 内部的更新计划将被同步刷新。

useEffect 和 useLayoutEffect 的区别？

useEffect 在渲染时是异步执行，并且要等到浏览器将所有变化渲染到屏幕后才会被执行。
useLayoutEffect 在渲染时是同步执行，其执行时机与 componentDidMount，componentDidUpdate 一致

对于 useEffect 和 useLayoutEffect 哪一个与 componentDidMount，componentDidUpdate 的是等价的？

useLayoutEffect，因为从源码中调用的位置来看，useLayoutEffect的 create 函数的调用位置、时机都和 componentDidMount，componentDidUpdate 一致，且都是被 React 同步调用，都会阻塞浏览器渲染。

useEffect 和 useLayoutEffect 哪一个与 componentWillUnmount 的是等价的？

同上，useLayoutEffect 的 detroy 函数的调用位置、时机与 componentWillUnmount 一致，且都是同步调用。useEffect 的 detroy 函数从调用时机上来看，更像是 componentDidUnmount (注意React 中并没有这个生命周期函数)。

为什么建议将修改 DOM 的操作里放到 useLayoutEffect 里，而不是 useEffect？

可以看到在流程9/10期间，DOM 已经被修改，但但浏览器渲染线程依旧处于被阻塞阶段，所以还没有发生回流、重绘过程。由于内存中的 DOM 已经被修改，通过 useLayoutEffect 可以拿到最新的 DOM 节点，并且在此时对 DOM 进行样式上的修改，假设修改了元素的 height，这些修改会在步骤 11 和 react 做出的更改一起被一次性渲染到屏幕上，依旧只有一次回流、重绘的代价。
如果放在 useEffect 里，useEffect 的函数会在组件渲染到屏幕之后执行，此时对 DOM 进行修改，会触发浏览器再次进行回流、重绘，增加了性能上的损耗。

函数式编程

编程范式
纯函数
不可变值

JSX 本质 和 vdom

JSX 即 createElement 函数
执行生成 vnode
patch(elem, vnode) patch(vnode, newVnode)

合成事件

所有事件挂载到 document 上
event 不是原生的，是 SyntheticEvent 合成事件对象，模拟出来 DOM 事件所有能力
所有的事件，都被挂载到 document 上
和 Vue 事件不同，和 Dom 事件也不同

  1. import React from "react";
  3. class EventDemo extends React.Component {
  4.     constructor(props) {
  5.         super(props);
  6.         this.state = {
  7.             name: "zhangsan",
  8.             list: [
  9.                 {
  10.                     id: "id-1",
  11.                     title: "标题1",
  12.                 },
  13.                 {
  14.                     id: "id-2",
  15.                     title: "标题2",
  16.                 },
  17.                 {
  18.                     id: "id-3",
  19.                     title: "标题3",
  20.                 },
  21.             ],
  22.         };
  24.         // 修改方法的 this 指向
  25.         this.clickHandler1 = this.clickHandler1.bind(this);
  26.     }
  27.     render() {
  28.         // this - 使用 bind
  29.         // return <p onClick={this.clickHandler1}>{this.state.name}</p>;
  31.         // this - 使用静态方法
  32.         // return <p onClick={this.clickHandler2}>clickHandler2 {this.state.name}</p>;
  34.         // event
  35.         // return (      ，，，
  36.         //     <a href="https://imooc.com/" onClick={this.clickHandler3}>
  37.         //         click me
  38.         //     </a>
  39.         // );
  41.         // 传递参数 - 用 bind(this, a, b)
  42.         return (
  43.             <ul>
  44.                 {this.state.list.map((item, index) => {
  45.                     return (
  46.                         <li
  47.                             key={item.id}
  48.                             onClick={this.clickHandler4.bind(this, item.id, item.title)}
  49.                         >
  50.                             index {index}; title {item.title}
  51.                         </li>
  52.                     );
  53.                 })}
  54.             </ul>
  55.         );
  56.     }
  57.     clickHandler1() {
  58.         // console.log('this....', this) // this 默认是 undefined
  59.         this.setState({
  60.             name: "lisi",
  61.         });
  62.     }
  63.     // 静态方法，this 指向当前实例
  64.     clickHandler2 = () => {
  65.         this.setState({
  66.             name: "lisi",
  67.         });
  68.     };
  69.     // 获取 event
  70.     clickHandler3 = (event) => {
  71.         event.preventDefault(); // 阻止默认行为
  72.         event.stopPropagation(); // 阻止冒泡
  73.         console.log("target", event.target); // 指向当前元素，即当前元素触发
  74.         console.log("current target", event.currentTarget); // 指向当前元素，假象！！！
  76.         // 注意，event 其实是 React 封装的。可以看 __proto__.constructor 是 SyntheticEvent 组合事件
  77.         console.log("event", event); // 不是原生的 Event ，原生的 MouseEvent
  78.         console.log("event.__proto__.constructor", event.__proto__.constructor);
  80.         // 原生 event 如下。其 __proto__.constructor 是 MouseEvent
  81.         console.log("nativeEvent", event.nativeEvent);
  82.         console.log("nativeEvent target", event.nativeEvent.target); // 指向当前元素，即当前元素触发
  83.         console.log("nativeEvent current target", event.nativeEvent.currentTarget); // 指向 document ！！！
  85.         // 1. event 是 SyntheticEvent ，模拟出来 DOM 事件所有能力
  86.         // 2. event.nativeEvent 是原生事件对象
  87.         // 3. 所有的事件，都被挂载到 document 上
  88.         // 4. 和 DOM 事件不一样，和 Vue 事件也不一样
  89.     };
  90.     // 传递参数
  91.     clickHandler4(id, title, event) {
  92.         console.log(id, title);
  93.         console.log("event", event); // 最后追加一个参数，即可接收 event
  94.     }
  95. }
  97. export default EventDemo;

为何要合成事件机制

更好的兼容性和跨平台
载到 document ，减少内存消化，避免频繁解绑
方便事件的统一管理（如事务机制）

setState 和 batchUpdate

有时异步（普通使用），有时同步（setTimeout、DOM事件）
有时合并（对象形式），有时不合并（函数形式）
后者比较好理解（像Object.assign），主要讲解前者

  1. import React from "react";
  3. // 函数组件（后面会讲），默认没有 state
  4. class StateDemo extends React.Component {
  5.     constructor(props) {
  6.         super(props);
  8.         // 第一，state 要在构造函数中定义
  9.         this.state = {
  10.             count: 0,
  11.         };
  12.     }
  13.     render() {
  14.         return (
  15.             <div>
  16.                 <p>{this.state.count}</p>
  17.                 <button onClick={this.increase}>累加</button>
  18.             </div>
  19.         );
  20.     }
  21.     increase = () => {
  22.         // 第二，不要直接修改 state ，使用不可变值 ----------------------------
  23.         // this.state.count++ // 错误
  24.         // this.setState({
  25.         //     count: this.state.count + 1, // SCU
  26.         // });
  27.         // 操作数组、对象的的常用形式
  29.         // 第三，setState 可能是异步更新（有可能是同步更新） ----------------------------
  31.         // this.setState(
  32.         //     {
  33.         //         count: this.state.count + 1,
  34.         //     },
  35.         //     () => {
  36.         //         // 联想 Vue $nextTick - DOM
  37.         //         console.log("count by callback", this.state.count); // 回调函数中可以拿到最新的 state
  38.         //     }
  39.         // );
  40.         // console.log("count", this.state.count); // 异步的，拿不到最新值
  42.         // // setTimeout 中 setState 是同步的
  43.         // setTimeout(() => {
  44.         //     this.setState({
  45.         //         count: this.state.count + 1,
  46.         //     });
  47.         //     console.log("count in setTimeout", this.state.count);
  48.         // }, 0);
  50.         // 自己定义的 DOM 事件，setState 是同步的。再 componentDidMount 中
  52.         // 第四，state 异步更新的话，更新前会被合并 ----------------------------
  54.         // 传入对象，会被合并（类似 Object.assign ）。执行结果只一次 +1
  55.         // this.setState({
  56.         //     count: this.state.count + 1,
  57.         // });
  58.         // this.setState({
  59.         //     count: this.state.count + 1,
  60.         // });
  61.         // this.setState({
  62.         //     count: this.state.count + 1,
  63.         // });
  65.         // 传入函数，不会被合并。执行结果是 +3
  66.         this.setState((prevState, props) => {
  67.             return {
  68.                 count: prevState.count + 1,
  69.             };
  70.         });
  71.         this.setState((prevState, props) => {
  72.             return {
  73.                 count: prevState.count + 1,
  74.             };
  75.         });
  76.         this.setState((prevState, props) => {
  77.             return {
  78.                 count: prevState.count + 1,
  79.             };
  80.         });
  81.     };
  82.     // bodyClickHandler = () => {
  83.     //     this.setState({
  84.     //         count: this.state.count + 1,
  85.     //     });
  86.     //     console.log("count in body event", this.state.count);
  87.     // };
  88.     // componentDidMount() {
  89.     //     // 自己定义的 DOM 事件，setState 是同步的
  90.     //     document.body.addEventListener("click", this.bodyClickHandler);
  91.     // }
  92.     // componentWillUnmount() {
  93.     //     // 及时销毁自定义 DOM 事件
  94.     //     document.body.removeEventListener("click", this.bodyClickHandler);
  95.     //     // clearTimeout
  96.     // }
  97. }
  99. export default StateDemo;
  101. // -------------------------- 我是分割线 -----------------------------
  103. // // 不可变值（函数式编程，纯函数） - 数组
  104. // const list5Copy = this.state.list5.slice();
  105. // list5Copy.splice(2, 0, "a"); // 中间插入/删除
  106. // this.setState({
  107. //     list1: this.state.list1.concat(100), // 追加
  108. //     list2: [...this.state.list2, 100], // 追加
  109. //     list3: this.state.list3.slice(0, 3), // 截取
  110. //     list4: this.state.list4.filter((item) => item > 100), // 筛选
  111. //     list5: list5Copy, // 其他操作
  112. // });
  113. // // 注意，不能直接对 this.state.list 进行 push pop splice 等，这样违反不可变值
  115. // // 不可变值 - 对象
  116. // this.setState({
  117. //     obj1: Object.assign({}, this.state.obj1, { a: 100 }),
  118. //     obj2: { ...this.state.obj2, a: 100 },
  119. // });
  120. // // 注意，不能直接对 this.state.obj 进行属性设置，这样违反不可变值

this.setState异步还是同步？

setState 无所谓异步还是同步
看是否能命中 batchedUpdates 机制，
Legacy模式命中异步，反之同步；Concurrent模式统一异步
判断 isBatchingUpdates

例：

  1. 合成事件中是异步
  2. 钩子函数中的是异步
  3. 原生事件中是同步
  4. setTimeout中是同步

    哪些能命中 batchUpdate 机制

    生命周期（和它调用的函数）
    React 中注册的事件（和它调用的函数）
    React 可以 “管理”的入口

    哪些不能命中 batchUpdate 机制

    setTimeout setInterval等（和它调用的函数）
    自定义的 DOM 事件（和它调用的函数）
    React “管不到”的入口

    transaction 事务机制

    组件渲染和更新过程

    JSX 如何渲染成页面
    setState 之后如何更新页面
    全流程
    更新的两个阶段：reconciliation commit
    React fiber

表单校验

受控组件（非受控组件）
input textarea select 用 value
checkbox radio 用 checked

  1. import React, { memo } from "react";
  2. import { Form, Input } from "antd";
  4. const Test = memo((props) => {
  5.     const [form] = Form.useForm();
  7.     const passwordValidator = (rule, value, callback) => {
  8.         const { getFieldValue } = form;
  9.         if (value && value !== getFieldValue("password")) {
  10.             callback("两次输入不一致！");
  11.         }
  12.         callback();
  13.     };
  15.     return (
  16.         <Form from={form}>
  17.             <Form.Item label="非空限制">
  18.                 {getFieldDecorator("name", {
  19.                     rules: [
  20.                         {
  21.                             required: true,
  22.                             message: "不能为空",
  23.                         },
  24.                     ],
  25.                 })(<Input placeholder="请输入名称" />)}
  26.             </Form.Item>
  27.             <Form.Item label="字符串限制-范围限制">
  28.                 {getFieldDecorator("password", {
  29.                     rules: [
  30.                         {
  31.                             required: true,
  32.                             message: "密码不能为空",
  33.                         },
  34.                         {
  35.                             min: 4,
  36.                             message: "密码不能少于4个字符",
  37.                         },
  38.                         {
  39.                             max: 6,
  40.                             message: "密码不能大于6个字符",
  41.                         },
  42.                     ],
  43.                 })(<Input placeholder="请输入密码" type="password" />)}
  44.             </Form.Item>
  45.             <Form.Item label="字符串限制-长度限制">
  46.                 {getFieldDecorator("nickname", {
  47.                     rules: [
  48.                         {
  49.                             required: true,
  50.                             message: "昵称不能为空",
  51.                         },
  52.                         {
  53.                             len: 4,
  54.                             message: "长度需4个字符",
  55.                         },
  56.                     ],
  57.                 })(<Input placeholder="请输入昵称" />)}
  58.             </Form.Item>
  59.             <Form.Item label="自定义校验">
  60.                 {getFieldDecorator("passwordcomfire", {
  61.                     rules: [
  62.                         {
  63.                             required: true,
  64.                             message: "请再次输入密码",
  65.                         },
  66.                         {
  67.                             validator: passwordValidator,
  68.                         },
  69.                     ],
  70.                 })(<Input placeholder="请输入密码" type="password" />)}
  71.             </Form.Item>
  72.             <Form.Item label="空格校验">
  73.                 {getFieldDecorator("hobody", {
  74.                     rules: [
  75.                         {
  76.                             whitespace: true,
  77.                             message: "不能输入空格",
  78.                         },
  79.                     ],
  80.                 })(<Input placeholder="请输入昵称" />)}
  81.             </Form.Item>
  82.             <Form.Item label="正则校验">
  83.                 {getFieldDecorator("qbc", {
  84.                     rules: [
  85.                         {
  86.                             message: "只能输入数字",
  87.                             pattern: /^[0-9]+$/,
  88.                         },
  89.                     ],
  90.                 })(<Input placeholder="请输入ABC" />)}
  91.             </Form.Item>
  92.         </Form>
  93.     );
  94. });
  96. export default Test;

组件使用

props 传递数据
props 传递函数
props 类型检查

异步加载

  1. import ReactDOM from "react-dom";
  2. import React, { Component, lazy, Suspense } from "react";
  4. const Sub = lazy(() => import("./sub"));
  6. class App extends Component {
  7.     render() {
  8.         return (
  9.             <div>
  10.                 <Suspense fallback={<div>loading</div>}>
  11.                     <Sub />
  12.                 </Suspense>
  13.             </div>
  14.         );
  15.     }
  16. }
  18. ReactDOM.render(<App />, document.getElementById("root"));

组件优化-经典面试题

  1. import React, { Component, PureComponent, memo } from "react";
  2. import ReactDOM from "react-dom";
  4. // 组件的优化
  5. class Sub extends PureComponent {
  6.     // shouldComponentUpdate(nextProps, nextState) {
  7.     //     if (nextProps.name === this.props.name) {
  8.     //         return false;
  9.     //     }
  10.     //     return true;
  11.     // }
  12.     render() {
  13.         console.log("sub render");
  14.         return <div>sub</div>;
  15.     }
  16. }
  18. const SubFun = memo((props) => {
  19.     console.log("SubFun render");
  20.     return <div>SubFun</div>;
  21. });
  23. class App extends Component {
  24.     state = {
  25.         count: 0,
  26.     };
  27.     handleClick = () => {
  28.         this.setState({
  29.             count: this.state.count + 1,
  30.         });
  31.     };
  33.     callback = () => {};
  35.     render() {
  36.         console.log("render");
  37.         const { count } = this.state;
  38.         return (
  39.             <div>
  40.                 {/* <Sub name="wcd" /> */}
  41.                 {/* <Sub cb={() => this.callback()} /> */}
  42.                 <Sub cb={this.callback} />
  43.                 <SubFun cb={this.callback} />
  44.                 <p>{count}</p>
  45.                 <button onClick={this.handleClick}>button</button>
  46.             </div>
  47.         );
  48.     }
  49. }
  51. ReactDOM.render(<App />, document.getElementById("root"));