React底层 render, createElement 方法作用梳理

Posted 2021-07-07 哈娄

目录

 1.createElement方法作用

2. render方法作用

3.setState方法

---

 

react核心方法有ReactDom.render, React.createElement, setState三种方法。webpack+babel 会将 jsx 转换成 React.createElement(type, props, ...children)。 

正常写组件 

function App() {
  return (
      <p className="title">hello world</p>
  );
}
ReactDOM.render(<APP />, document.getElementById("root"))

被babel转换之后 

function App() {
  return React.createElement(
    "p",
    { className: "title" },
    "hello world"
  );
}
ReactDOM.render(React.createElement(APP, null), document.getElementById("root"));

 1.createElement方法作用

• createElement接受三个参数(类型div或者 class与函数组件，属性class之类的，其他的文案内容)，React.createElement(type, props, ...children)
• 根据不同类型的组件，不同的处理 返回AST(抽象语法树结构)，供render使用

因为有class,function不同组件 需要不同处理逻辑，并且两个的typeof类型都属于function无法区分 ？？

• 所以声明一个Component函数，内部声明一个对象变量, class组件声明时extends React.Component然后在render函数内进行判断是否有对象变量来区分是class还是function组件

 

2. render方法作用

• render方法接受两个参数 reactDom.render(jsx, container) 
• 将虚拟dom vnode转换成 真实dom node,然后添加到 container 上进行显示

 

3.setState方法

可以看我的另一篇对于setState 梳理的文章---- setState源码解析