【前端学习——React】React API

尚硅谷react

学习react的api方法

1. setState(stateChange, [callback])更新状态

• 函数式 ------- 第一个参数是返回改变状态对象的函数，可以接收到state和props
  依赖于原状态可使用
• 对象式(函数式的语法糖) ------- 第一个参数传更新的对象
  不依赖于原状态可使用

setState 方法会进行批处理，后调的 setState 会覆盖统一周期内先调用的 setState 的值。因此连续使用 setState，不能实时改变state
setState 做的事情不仅仅只是修改了 this.state 的值，另外最重要的是它会顺序执行React 的 生命周期函数，也就是触发 React 的更新机制，进行diff，然后将 patch 部分更新到真实 dom 里，帮助我们重新绘制视图，即引发 shouldComponentUpdate、render 等一系列函数的调用。而只修改 this.state 的值，不会触发渲染

第二个参数就是回调函数（可选），异步，并不总是立即更新组件，推迟更新，重新render后调用更新（为什么这么设计？性能优化假如每次 setState 都要更新数据，更新过程就要走五个生命周期，走完一轮生命周期再拿 render 函数的结果去做 diff 对比和更新真实 DOM，会很耗时间。所以将每次调用都放一起做一次性处理，能降低对 DOM 的操作，提高应用性能）。

https://segmentfault.com/a/1190000041438134

(因此如果要setstate后获取最新的状态数据就在这里调用，不能直接看。或者使用 componentDidUpdate )。

setstate的回调函数与componentDidUpdate之间的差别与关系

• setstate的回调函数只针对于与其绑定的setstate更新后才会触发，而componentDidUpdate针对于全局的setstate更新后都会触发，相当于页面中只要有setstate的更新，那么componentDidUpdate就会触发。
• 如果某个函数只需要在其绑定的setstate里触发时，就不需要写在componentDidUpdate，以此来提高性能。
  https://www.jianshu.com/p/f9e787b8afeb

2. lazyload 现点现加载

用法

const Home=lazy(()=>{import('./Home')})

在注册路由外包裹 <Suspense fallback={}>，fallback写等待过程中显式的内容 （这里面的东西不能懒加载）

3. Hooks

• useState

• useEffect
  在函数式组件中使用生命周期钩子
  第二个参数不传=监测所有参数
  

• useRef
  和creatRef差不多，都是一个标签专用

• useCallback
  在多次渲染中缓存一个函数（注意是缓存函数本身，这也是和useMemo的区别之处），直至这个函数的依赖发生改变。

用法useCallback(fn, dependencies)

跳过组件的重新渲染
从记忆化回调中更新
state 防止频繁触发
Effect 优化自定义 Hook

• memo
  默认情况下，当一个组件重新渲染时， React 将递归渲染它的所有子组件。
  可以将 组件包裹在 memo 中。如果 props 和上一次渲染时相同，那么 组件将跳过重新渲染。这时上一个缓存函数useCallback就变得很重要。

例如

import { memo } from 'react';

const ShippingForm = memo(function ShippingForm({ onSubmit }) {
  // ...
});

• useMemo
  useMemo 缓存函数调用的结果

• Fragment
  < Fragment>只能写一个属性key
  可以用简写<></> 但简写不能写 任何属性

• creatContext
  给子组件（孙子后面）传递信息，给子组件包一层provider，要传的数据在value（必须写value），value可以传好几个参数

Mycontext=creatContext();
<Mycontext.Provider value={xxx}>
  ...
</Mycontext.Provider>

要用的子组件，声明自己要接收，这里类式和函数式不一样

//类式组件
static contextType=Mycontext;

console.log(this.context)
//如果传了好几个value，则通过this.context.xxx访问

//函数式组件
<Mycontext.Consumer value={xxx}>
  {
     value=>()//value就是传递的参数
  }
</Mycontext.Consumer >

• PureComponent
  继承自PureComponent，就不会render 到setState参数没产生修改的组件。
  但是更新操作必须是产生新数据
  

• render props
  类似vue的插槽，向组件内传入带内容的结构
  例如

<A render={(xxx)=><B/ xxx={xxx}>}/>

给组件传参，但参数的返回值是一个组件，可以把一个组件放置在另一个组件里面，

通信方式总结