react 1 - 前端笔记 JSRUN

1.React 的组件间通信都有哪些形式？

props: 父子通信，父组件通过props把数据传递给子组件，子组件通过props去接受数据；

callback: 子父通信：子组件调用父级组件传过来的回调函数，将数据传递给父组件；

context: 不需要每个组件层层添加props，就能在组件树之间进行数据传递的方法；通常用于对于某个组件树而言是‘全局’的数据；比如：组件树中很多不同层级的组件需要访问同一批数据，context可以将这些数据向组件树所有的组件进行‘广播’，所有组件都能访问到这些数据，也能访问到后续的更新；

创建context
const MyContext = React.createContext();
通过Provider传递
<MyContext.Provider value={num}>
...
<组件1 />
</MyContext.Provider>
通过Consumer接受
//组件1
<MyContext.Consumer>
  {value => /* 基于 context 值进行渲染*/}
</MyContext.Consumer>
redux: 全局状态管理; 常用于大量数据变化/更新；与服务器大量交互；某个组件的状态需要共享，需要在任何地方都可以取到；一个组件需要改变另外一个组件的状态等等

2.React 中如何实现路由懒加载？

import：import()方法返回一个Promise对象，可实现路由的懒加载；

react-loadable: 用于加载具有动态导入的组件的高阶组件;
const LoadableComponent = Loadable({
  loader: () => import('./component'),
  loading: Loading,
});
React.Suspense/lazy: React.lazy必须通过调用动态的 import()加载一个函数，它会返回一个 Promise，并解析resolve为一个带有包含React组件的默认导出的模块。

React.Suspense可以指定一个加载器，是一个懒加载组件; 有个fallback 属性接受任何在组件加载过程中你想展示的 React 元素；

const component = React.lazy(() => import('../pages/1'));
<React.Suspense fallback={<Loading />}>
...
components
</React.Suspense>

3.React 的生命周期函数都有哪些，分别有什么作用？

挂载:

constructor: 组件挂载之前会调用构造函数；绑定this;通过super继承；在constructor里不要调用setState方法；

getDerivedStateFromProps: 一个静态函数，不能在这个函数里使用this; 会在调用render方法之前调用，并且在初始挂载及后续更新时都会被调用；

compentWillMount: 组件将要挂载时触发；在render之前调用；此方法不会同步调用setState不会触发额外渲染；

render: 此方法是 class 组件中唯一必须实现的方法。当 render 被调用时，它会检查 this.props 和 this.state 的变化并返回: react元素,数组或fragments，portals,字符串或数值等；render函数应为纯函数；

componentDidMount: componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用。可做dom初始化，网络请求等处理；

更新：

getDerivedStateFromProps: 会在render方法之前调用，并且在初始化挂载和后续更新时都会被调用；

shouldComponentUpdate: 当 props 或 state 发生变化时，shouldComponentUpdate会在渲染执行之前被调用。返回值默认为 true。此方法仅作为性能优化的方式而存在；

render: 此方法是 class 组件中唯一必须实现的方法。当 render 被调用时，它会检查 this.props 和 this.state 的变化并返回: react元素,数组或fragments，portals,字符串或数值等；render函数应为纯函数；

getSnapshotBeforeUpdate: 此方法在最近一次渲染输出（提交到 DOM 节点）之前调用。在组件发生更改之前从dom中捕获一些信息（例如，滚动位置）。

componentDidUpdate: 此方法会在更新后会被立即调用。首次渲染不会执行此方法。组件更新后，可在此对dom进行操作；做网络请求；发布订阅等；

卸载

componentWillUnmount: componentWillUnmount() 会在组件卸载及销毁之前直接调用。在此方法做必要清理工作，如清除定时器；取消网络；取消订阅/事件等；