01. createElement

babel 转换 (opens new window)

class App extends Component {
  render() {
    return (
      <div className="App">
        hello react
      </div>
    );
  }
}

通过Babel来配合会将JSX转移成React.createElement函数调用,代码如下：

"use strict";

class App extends Component {
  render() {
    return /*#__PURE__*/React.createElement("div", {
      className: "App"
    }, "hello react");
  }

}

React.createElement函数的语法如下：

React.createElement(type, [props], [...children])

• type： 表示元素名称
• props：表示组件的入参 也就是传入组件的属性
• children：表示子组件

React.createElement函数用于创建并返回指定类型的新react元素 经过createElement处理，最终会形成 $$typeof: Symbol(react.element)对象。对象上保存了该react.element的信息。

jsx元素类型	react.createElement 转换后	type 属性
element元素类型	react element类型	标签字符串，例如 div
fragment类型	react element类型	symbol react.fragment类型
文本类型	直接字符串	无
数组类型	返回数组结构，里面元素被react.createElement转换	无
组件类型	react element类型	组件类或者组件函数本身
三元表达式	先执行三元运算，然后按照上述规则处理	看三元运算返回结果
函数执行	先执行函数，然后按照上述规则处理	看函数执行返回结果

02. cloneElement

createElement 是把我们写的jsx 变成element元素，而cloneElement则是以element元素为模版，进行克隆并返回新的元素，返回新的props元素是将新旧props浅合并得到的 例如在react-router的Switch，通过这种方式来匹配唯一的Route并进行渲染

03. createContext

createContext 用于创建一个contenxt对象， createContext对象中，包括

• Provider： 用于传递Context对象值value
• Consumer： 接受value变化订阅的Consumer

const myContext = React.createContext(defaultValue); 

defaultValue： 只有当组件所处的树没有匹配的provider时，其defaultValue参数才会生效

import React, { Component } from "react";
const MyContext = React.createContext(null);

function ComponentA() {
  return (
    <div>
      ComponentA
      <ComponentB />
    </div>
  );
}
function ComponentB(props) {
  return (
    <MyContext.Consumer>{(value) => <div>{value.age}</div>}</MyContext.Consumer>
  );
}
class context extends Component {
  render() {
    const userInfo = {
      name: "wsh",
      age: 18,
    };
    return (
      <div>
        <MyContext.Provider value={userInfo}>
          <ComponentA />
        </MyContext.Provider>
      </div>
    );
  }
}

export default context;

04. createRef

createRef 创建一个ref元素，添加在react元素上

export default class ref extends Component {
    constructor(props) {
        super(props)
        this.node = React.createRef()
    }
    componentDidMount() {
        this.node.current.style.color="red"
        console.log(this.node)
    }
    render() {
        return (
            <div>
                <div ref={this.node}>hello react</div>
            </div>
        )
    }
}

05. isVaildElement

isValidElement 用来检测是否为react element元素，结果返回true｜false，一般用于公共组件/开源库，在业务组件，状态都是已知的，不需要去验证.

06. Children.map

• 场景一： 多个子元素

function WarpComponent(props){
    console.log(props.children)
    return <div>
        {props.children}
    </div>
}
function Index(){
    const arr = [1,2,3,4]
    return <div style={{ marginTop:'50px' }} >
        <WarpComponent>
            <span>11</span>
            {arr.map((v) => <Text value={v}/>)}
        </WarpComponent>
    </div>
}

结果：

通过 React.Children.map操作

function WarpComponent(props){
    const newChildren = React.Children.map(props.children,(item)=>item)
    console.log(newChildren)
    return <div>
        {newChildren}
    </div>
}

结果：

如果 children 是一个 Fragment 对象，它将被视为单一子节点的情况处理，不会被遍历

07. Children.forEach

Children.forEach 与 Children.map 用法类似，但是它仅停留在遍历阶段 React.Children.forEach = React.Children.toArray + Array.prototype.forEach

08. Children.count

返回同一级别子组件的数量

09. Children.toArray

Children.toArray返回，props.children扁平化后结果。

10. Children.only

验证 children 是否只有一个子节点（一个 React 元素），如果有则返回它，否则此方法会抛出错误。