快速上手react

如何使用react

安装node
确保npm版本在5.2之后才可以使用npx命令，通过npm -v检查版本是否正确

npx create-react-app my-app
cd my-app
npm start

现在你已经在当前目录创建了一个my-app的项目

const element = <h1>Hello, world!</h1>;

这个有趣的标签语法既不是字符串也不是 HTML。它被称为 JSX，是一个 JavaScript 的语法扩展。

Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。

以下两种示例代码完全等效：

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement() 会预先执行一些检查，以帮助你编写无错代码，但实际上它创建了一个这样的对象：

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

这些对象被称为 “React 元素”。它们描述了你希望在屏幕上看到的内容。React 通过读取这些对象，然后使用它们来构建 DOM 以及保持随时更新。

React.creaeElement实现原理

新建react.js文件

const hasOwnProperty = Object.prototype.hasOwnProperty;
const REACT_ELEMENT_TYPE = Symbol.for('react.element');

const ReactElement = function (type, ref, props) {
  const element = {
    $$typeof: REACT_ELEMENT_TYPE,
    type: type,
    ref: ref,
    props: props
  }
  return element
}

function createElement (type, config, children) {
  let propName;
  const props = {};

  let ref = null;
  // 剩余的属性将添加到新的props对象中
  if (config != null) {
    for(propName in config) {
      if (hasOwnProperty.call(config, propName)) {
        props[propName] = config[propName]
      }
    }
  }
  // children可能有多个参数，那么就将children分配到一个新的对象属性上
  const childrenLength = arguments.length - 2;
  if (childrenLength === 1) {
    props.children = children
  } else {
    const childArray = Array(childrenLength);
    for(let i = 0; i < childrenLength; i++) {
      childArray[i] = arguments[i + 2];
    }
    props.children = childArray
  }
  return ReactElement(type, ref, props)
}

export default {
  createElement
}

测试代码

import React from './react';
import ReactDOM from 'react-dom';

var element = React.createElement("h1", {
  className: "greeting"
}, "Hello", React.createElement("span", null, "world"));

ReactDOM.render(element, document.getElementById('root'));

render实现原理

const hasOwnProperty = Object.prototype.hasOwnProperty;
function render (element, parentNode) {
  let propName;
  if (typeof element === 'string') {
    return parentNode.appendChild(document.createTextNode(element));
  }
  let { type, props } = element;
  let domElement = document.createElement(type);
  for(propName in props) {
    if (hasOwnProperty.call(props, propName)) {
      if (propName === 'className') {
        domElement.className = props[propName];
      }
      else if (propName === 'children') {
        let children = Array.isArray(props.children) ? props.children : [props.children];
        children.forEach(child => render(child, domElement))
      }
      else {
        domElement.setAttribute(propName, props[propName]);
      }
    }
  }
  parentNode.appendChild(domElement)
}

export default {
  render
}

执行代码的流程

源代码（JSX代码）->babel编译（ React.createElement()函数调用）->React元素（虚拟的DOM对象）-> render（构建真实 DOM）