1.Pure React.md

Posted on | In

pure react

##react 与 react-dom的区别

原本的 react package 被拆分为 react 及 react-dom 两个 package。其中 react package 中包含 React.createElement、 .createClass、 .Component， .PropTypes， .Children 这些 API，而 react-dom package 中包含 ReactDOM.render、 .unmountComponentAtNode、 .findDOMNode。

根节点结构

使用reactDom挂载节点，React作为jsx语法载体. 使用react.createElement作为原子单位进行开发。

1
2
3
4
5
6
7
8
9
const App = () => {
    return React.createElement(
        'div',
        {id: 'yeah'},
        React.createElement('h1', {}, 'adopt-me')
    );
}   

ReactDOM.render(React.createElement(App), document.getElementById('root'));

createElement函数参数解读

  1. tagName
  2. attribute
  3. children, 可以是数组， 也可以是另一个虚拟dom

可复用元素

组件重用的基础在于， createElement函数， 该函数的第三个参数让我们可以不断地重用组件， 只要这个组件符合react.createElement的规范，都可以直接传入React.createElement，作为一个虚拟dom节点.挂载在根节点上，导致了我们现在的开发过程， 其实就是不断的开发新的组件。

传递组件的props

// 这里可以使用ES6的解构赋值特性

1
2
3
4
5
6
7
8
9
10
11
const pet = ({ name, name1}) => {
    return React.createElement(
        'div',
        {},
        [
            React.createElement('h2', {}, name),
            React.createElement('h2', {}, name1),
        ]

    )
}