React

148 阅读2分钟

顶层API

React

React.Children

React.Component

React.PureComponent

  • React.PureComponent与React.Component很相似
  • 两者的区别在于React.Component并未实现shouldComponentUpdate(),而React.PureComponent中以浅显对比props和state的方式来实现了该函数。

React.memo

有点类似vue的keep-alive

  • React.memo为高阶函数
  • 它与React.PureComponent非常相似
  • 但只适用于函数组件,而不适用class组件
  • 组件函数在给定相同props的情况下渲染相同的结果,此时将其包装在React.memo中调用,以此通过记忆组件渲染结果的方式来提高组件的性能
  • 跳过渲染组件的操作并直接复用最近一次渲染的结果

React.Fragment

  • React.Fragment组件能够在不额外创建DOM元素的情况下,让render()方法中返回多个元素。
  • 也可以使用其简写语法<></>

React.profiler

React.StrictMode

React.Suspense

React.createContext

React.createElement

  • 元素: 元素是构成React应用的最小砖块
  • 元素描述了你在屏幕上想看到的内容
  • 元素类型可以是标签名字符串(如‘div’、‘span’等),也可以是React组件类型(class组件或者函数组件),或是React fragment类型
  • 与浏览器的DOM元素不同,React元素是创建开销极小的普通对象
  • React DOM会复制更新DOM来与React元素保持一致
  • JSX编写的代码会被转换成使用React.createElement()的形式
  • 通俗理解: 有点像是JavaScript的文档片段(DocumentFragment)

React.createFactory

已废弃

React.cloneElement

  • 以element元素为样板克隆并返回新的React元素
  • 返回元素的props等于新的props和原始元素的props浅层合并后的结果
  • 新的子元素将取代现有的子元素
  • 原始元素的key和ref将被保留
  • 通俗理解:有点像JavaScript构造函数继承的感觉

React.isValidElement

  • 验证对象是否为React元素,返回值是true或false

React.createRef

React.forwardRef

React.lazy

  • 定义一个动态动态加载的组件
  • 有助于缩减bundle的体积,并延迟加载在初次使用时未用到的组件

ReactDOM