关于react.js:JSX-和-Virtual-DOM

jsx 是一种语法糖，通过 babel 编译后生成 React.createElement(component, props, ...children) 函数。

例如

const Element = (
  <div className="title">
    Hello 
    <span style={{fontSize:"20px",color:"#f00"}}>World!</span>
  </div>
)

通过 babel 编译后：

const Element = React.createElement(
  'div',
  {className: 'title',},
  'Hello',
  React.createElement(
    'span',
    {
      style: {
        fontSize: '20px',
        color: '#f00',
      },
    },
    'World!'
  )
);

jsx 语法通过 babel 编译后生成一种对象，即虚构 dom，在 react 中，通过 render 函数将虚构 dom 渲染成实在的 dom 绑定到对应节点中

import React from 'react'
import ReactDOM from 'react-dom'

// 虚构 dom
const Element = (
  <div className="title">
    Hello 
    <span style={{fontSize:"20px",color:"#f00"}}>World!</span>
  </div>
)
/*
等同于
const Element = React.createElement(
  'div',
  {className: 'title',},
  'Hello',
  React.createElement(
    'span',
    {
      style: {
        fontSize: '20px',
        color: '#f00',
      },
    },
    'World!'
  )
)
*/

// 绑定节点
const el = document.getElementById('root')

// render 办法渲染到页面
ReactDOM.render(Element, el)

这里须要两个函数实现页面的渲染：createElement 和 render 办法

createElement 函数

createElement 函数将 babel 转换过后的参数简化，返回对象 type 和 props

/**
 * 生成虚构 DOM 对象
 * @param {string} type      dom 节点类型
 * @param {object} config    属性对象
 * @param {*} [children]     子数组
 *
 * @return {object} {type,props}
 */
function createElement(type,config,children) {let props = {};
  for(let propsName in config){props[propsName] = config[propsName]
  };

  let childsLen = arguments.length - 2;
  if(childsLen===1){props.children = [children]
  }else if(childsLen>1){props.children = Array.prototype.slice.call(arguments, 2)
  }

  return {type, props}

}

render 函数

render 函数负责将虚构 dom 转化为实在 dom，咱们将 createElement 生成的虚构 dom 对象传入 render 函数的第一个参数，构造出 type 值和 props 对象

/**
 * @param {createElement} element    虚构 DOM 对象
 * @param {HTMLElement}} container    绑定的 dom 节点
 */
function render(element, container) {if (typeof element === 'string') {return container.appendChild(document.createTextNode(element))
  }

  let type  = element.type;
  let props  = element.props;

  if (type.isReactComponent) { // 如果是类组件
    element = new type(props).render()
    type = element.type
    props = element.props
  } else if (typeof type === 'function') { // 如果是函数组件
    element = type(props)
    type = element.type
    props = element.props
  }

  const el = document.createElement(type)
  for (let propName in props) {let value = props[propName]
    if (propName === 'className') {el.className = value} else if (propName === 'style') {let cssText = Object.keys(value).map((attr) => {let _attr = attr.replace(/([A-Z])/g, (a) => `-${a.toLocaleLowerCase()}`);
          return `${_attr}:${value[attr]}`
        }).join(';');

      el.style.cssText = cssText
    } else if (propName === 'children') {value.forEach((item) => render(item, el))
    } else {el.setAttribute(propName, value)
    }
  }
  return container.appendChild(el)
}

这里咱们还须要判断 type 值是类组件还是函数组件

类组件

对于如何判断类组件，咱们能够在组件继承的 Component 类中增加动态属性 isReactComponent 供 render 函数判断

class Component {
  static isReactComponent = true;
  constructor(props){this.props = props;}
}

类组件

let Element = React.createElement(fnElemen, { name: 'Hello', fontSize: '28px'})

class clsComp extends React.Component {render() {
    return React.createElement(
      'h1',
      {className: 'title'},
      this.props.name,
      React.createElement(
        'span',
        {style: { color: '#0f0', fontSize: this.props.fontSize}
        },
        'World'
      )
    )
  }
};

let Element = React.createElement(clsComp, { name: 'Hello', fontSize: '28px'})

ReactDOM.render(Element, document.getElementById('root'))

函数组件

function fnElemen(props){
  return React.createElement(
    'h1',
    {className: 'title'},
    props.name,
    React.createElement(
      'span',
      {style: { color: '#0f0', fontSize: props.fontSize} },
      'World'
    )
  )
}

let Element = React.createElement(fnElemen, { name: 'Hello', fontSize: '28px'})

ReactDOM.render(Element, document.getElementById('root'))

开发中的常见问题

为何必须援用 React

作用域内必须引入 react，否则会导致编译失败，这是因为 jsx 会编译为 React.createElement 的模式调用，所以 react 在 jsx 的作用域内必须要引入。

用户定义的组件以大写字母结尾

babel 在编译时会把小写字母结尾的元素断定为原生 DOM 标签，createElement 会把它编译成字符串，例如 <div> 或者 <span>，所以在编写组件的时候，须要以大写字母结尾，这样 createElement 才会把第一个变量被编译为对象

import React from 'react';

// 谬误！组件应该以大写字母结尾：function hello(props) {
  // 正确！这种 <div> 的应用是非法的，因为 div 是一个无效的 HTML 标签
  return <div>Hello {props.toWhat}</div>;
}

function HelloWorld() {
  // 谬误！React 会认为 <hello /> 是一个 HTML 标签，因为它没有以大写字母结尾：return <hello toWhat="World" />;
}

Props 默认值为“True”

如果你没给 prop 赋值，它的默认值是 true。以下两个 JSX 表达式是等价的：

<MyTextBox autocomplete />

<MyTextBox autocomplete={true} />

通常，咱们不倡议不传递 value 给 prop，因为这可能与 ES6 对象简写混同，{foo} 是 {foo: foo} 的简写，而不是 {foo: true}。这样实现只是为了放弃和 HTML 中标签属性的行为统一。