React工具类

248 阅读1分钟

crateElement

JSX会被编译为React.createElement的形式,然后被babel编译

React.createElement(type, [props], [...children])共有三个参数:

  • type:原生组件的话是标签的字符串,如“div”,如果是React自定义组件,则会传入组件
  • [props]:对象,dom类中的属性组件中的props
  • [...children]:其他的参数,会依此排序

经过React.createElement的包裹,最终会形成 $$typeof = Symbol(react.element)对象,对象保存了react.element的信息。

cloneElement

克隆并返回一个新的React元素。

结构:React.createElement(type, [props], [...children])

等同于:

<element.type {...element.props} {...props}>\
    {children}\
</element.type>

可以用来修改组件。

createContext

用于传递上下文。createContext会创建一个Context对象,用Context.Providervalue来传递值,用Context.Consumer接受value

Children

Children.map

遍历,并返回一个数组。

Children.forEach

遍历。

Children.count

返回Child内的总个数。

Children.only

验证Child是否只有一个元素,如果是,则正常返回,如果不是,则会报错。

Children.toArray

key,经过Children.toArray处理后,会给原本的key添加前缀

createRef

创建一个ref对象,获取节点信息。

createFactory

效果与createElement一样

React.createFactory(()=><div>test</div>)

isValidElement

用于验证是否是React元素,是的话就返回true,否则返回false

version

查看React的版本号。