「✍ import React from 'react' 做了什么 ？」

Question

在react文件中，头部必须要引入import React from 'react', 那么这个引入是如何起作用的呢

Answer

在编译时，jsx需要被babel编译为可执行代码

import React from 'react';

class App extends React.Component {
  render() {
    return <div>hello</div>
  }
}

上面这个class会被编译为：

import React from 'react';

class App extends React.Component {
  render() {
    return React.createElement(
      'div',
      null,
      'hello'
    );
  }
}

ReactDOM.render

要渲染一个React组件, 通常会用该方法完成，它接收两个参数，分别为React vdom和接收挂载的html元素

ReactDOM.render(
    React.createElement(‘Hello’, { name: ‘jenson’ }, null),
    document.getElementById(‘root’)
)

React.createElement

用于创建一个ReactElement

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

1）type：可以是一个html标签名称字符串，也可以是一个ReactClass；

2）props：元素的属性值对对象（可选）, 对于html标签，即是标签属性如style、src等等, 对于ReactClass，即为props

3）children：剩余参数皆会被作为子节点

e.g 1:

React.createElement(
  "div",
  { style: { color: "red" } },
  <p>你好</p>,
  <p>我叫jenson</p>
);

// 实际渲染
<div style="color: red">
  <p>你好</p>
  <p>我叫jenson</p>
</div>

e.g 2

class Title extends React.Component {
  render() {
    return (
      <div>
        <h1>{this.props.text}</h1>
        {this.props.children}
      </div>
    );
  }
}
React.createElement(Title, { text: '标题'},<p>你好</p>,<p>我叫jenson</p>)

// 实际渲染
<div>
  <h1>标题</h1>
  <p>你好</p>
  <p>我叫jenson</p>
</div>

More Function

React.render

todo

React.useState

todo

React.useCallback

todo