组件之间如何通讯

  • 父子组件 props
  • property methods
  • 自定义事件
  • Redux 和 Context ```javascript class Child extends React.Component { … myFunc() {} }

class Parent extends React.Component { constructor(props) { super(props); this.myRef = React.createRef(); } componentDifMount() { this.myRef.current.myFunc(); } … }

  1. <a name="RK9gw"></a>
  2. # JSX本质
  4. - createElement
  5. - 执行返回 vnode
  7. <a name="zxYDz"></a>
  8. # Context 是什么，如何应用
  10. - 父组件，向其下所有子孙组件传递信息
  11. - 如一些简单的公共信息：主题色、语言等
  12. - 复杂的公共信息，请用 redux
  14. <a name="Ox24Z"></a>
  15. # SCU用途
  17. - 性能优化
  18. - 配合不可变值使用
  20. <a name="DGOcW"></a>
  21. # redux单项数据流
  22. ![image.png](https://cdn.nlark.com/yuque/0/2022/png/1670861/1654930319293-f0e78e3f-74d5-40be-a0c4-7ee06e610ba9.png#clientId=u4f925ef0-6249-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=507&id=u67ea8bf9&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1013&originWidth=1155&originalType=binary&ratio=1&rotation=0&showTitle=false&size=363800&status=done&style=stroke&taskId=u0f60a119-b24c-43ce-aa8f-1774cc02b4d&title=&width=577.5)
  23. <a name="lfwN7"></a>
  24. # setState场景题
  25. ```jsx
  26. componentDidMount() {
  27.   // count 初始值为 0
  28.   this.setState({ count: this.state.conut + 1 });
  29.   console.log(this.state.count); // ① 0
  30.   this.setState({ count: this.state.conut + 1 });
  31.   console.log(this.state.count); // ② 0
  32.   setTimeout(() => {
  33.     this.setState({ count: this.state.conut + 1 });
  34.     console.log(this.state.count); // ③ 2
  35.   });
  36.   setTimeout(() => {
  37.     this.setState({ count: this.state.conut + 1 });
  38.     console.log(this.state.count); // ④ 3
  39.   });
  40. }

什么是纯函数

  • 返回一个新值，没有副作用（不会 “偷偷” 修改其他值）
  • 不可变值
  • 例如：arr1 = arr.slice();

    React组件生命周期

    image.png

React发起Ajax在哪个阶段

  • 同 vue 的 mounted
  • componentDidMount

列表渲染，为何使用 key

  • 同 Vue。必须要key，且不能是index 和 random
  • diff算法中通过 tag 和 key 来判断，是否是 sameNode

  • 减少渲染次数，提高渲染性能

    函数组件和class组件的区别

  • 纯函数，输入 props ，输出 JSX

  • 没有实例，没有生命周期，没有state

  • 不能扩展其他方法

    什么是受控组件

  • 表单的值受 state 控制

  • 需要自行监听 onChange，更新 state

  • 对比非受控组件

    何时使用异步组件

  • 同 Vue

  • 加载大组件

  • 路由懒加载

    多个组件功能逻辑，如何抽离

  • 高阶组件，HOC

  • Render props

    redux 如何进行异步请求

  • 使用异步 action

  • 如 redux-thunk

    react-router 如何配置懒加载

    ```jsx import {BrowserRouter as Router， Route， Switch} from ‘react-router-dom’; import React, { Suspense, lazy} from ‘react’;

const Home = lazy(() => import(‘./routes/Home’)); const About = lazy(() => import(‘./routes/About));

const App = () => { loading…}> } ```

PureComponent 有何区别

  • 实现了浅比较的 shouldComponentUpdate
  • 优化性能

  • 要结合不可变值使用

    React 事件和 DOM 事件的区别

  • 所有事件挂载到 document 上

  • event 不是原生的，是 SyntheticEvent 合成事件对象

  • dispatchEvent

    React 性能优化

  • 渲染列表使用 key

  • 自定义事件、DOM事件及时销毁
  • 合理使用异步组件
  • 减少函数 bind this 的次数
  • 合理使用 SCU PureComponent 和 memo
  • 合理使用 Immutable.js
  • webpack 层面优化
  • 前端通用，图片懒加载等

  • 使用SSR

    React 和 Vue 的区别

  • 都支持组件化

  • 都是数据驱动视图
  • 都是 vdom 操作 DOM
  • React 使用 JSX 拥抱 JS。Vue使用模板拥抱html
  • React 函数式编程，Vue 是声明式编程
    • React改数据都是通过函数 setState() 去处理
    • Vue 则是给data去声明指令 data.a = 2
  • React 需要更多的自力更生，Vue把想要的都给你