对于 React 组件和state|props的解析

阅读源码一个痛处是会陷进理不顺主干的困局中，本系列文章在实现一个 (x)react 的同时理顺 react 框架的主干内容(jsx/虚拟dom/组件/...)

组件即函数

在上一篇 JSX 和 Virtual DOM 中，解释了 JSX 渲染到界面的过程并实现了相应代码，代码调用如下所示：

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

const element = (
  

    helloworld!
  
)

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

本小节，我们接着探究组件渲染到界面的过程。在此我们引入组件的概念，组件本质上就是一个函数，如下就是一段标准组件代码：

import React from 'react'

// 写法 1：
class A {
  render() {
    return 
I'm componentA
  }
}

// 写法 2：无状态组件
const A = () => 
I'm componentA

ReactDOM.render(, document.body)

是 JSX 的写法，和上一篇同理，babel 将其转化为 React.createElement() 的形式，转化结果如下所示：

React.createElement(A, null)

可以看到当 JSX 中是自定义组件的时候，createElement 后接的第一个参数变为了函数，在 repl 打印 ，结果如下：

{
  attributes: undefined,
  children: [],
  key: undefined,
  nodeName: ƒ A()
}

注意这时返回的 Virtual DOM 中的 nodeName 也变为了函数。根据这些线索，我们对之前的 render 函数进行改造。

function render(vdom, container) {
  if (_.isFunction(vdom.nodeName)) { // 如果 JSX 中是自定义组件
    let component, returnVdom
    if (vdom.nodeName.prototype.render) {
      component = new vdom.nodeName()
      returnVdom = component.render()
    } else {
      returnVdom = vdom.nodeName() // 针对无状态组件：const A = () => 
I'm componentsA
    }
    render(returnVdom, container)
    return
  }
}

至此，我们完成了对组件的处理逻辑。

props 和 state 的实现

在上个小节组件 A 中，是没有引入任何属性和状态的，我们希望组件间能进行属性的传递(props)以及组件内能进行状态的记录(state)。

import React, { Component } from 'react'

class A extends Component {
  render() {
    return 
I'm {this.props.name}
  }
}

ReactDOM.render(, document.body)

在上面这段代码中，看到 A 函数继承自 Component。我们来构造这个父类 Component，并在其添加 state、props、setState 等属性方法，从而让子类继承到它们。

function Component(props) {
  this.props = props
  this.state = this.state || {}
}

首先，我们将组件外的 props 传进组件内，修改 render 函数中以下代码：

function render(vdom, container) {
  if (_.isFunction(vdom.nodeName)) {
    let component, returnVdom
    if (vdom.nodeName.prototype.render) {
      component = new vdom.nodeName(vdom.attributes) // 将组件外的 props 传进组件内
      returnVdom = component.render()
    } else {
      returnVdom = vdom.nodeName(vdom.attributes)     // 处理无状态组件：const A = (props) => 
I'm {props.name}
    }
    ...
  }
  ...
}

实现完组件间 props 的传递后，再来聊聊 state，在 react 中是通过 setState 来完成组件状态的改变的，后续章节会对这个 api（异步）深入探究，这里简单实现如下：

JTBC网站内容管理系统5.0.3.1

JTBC CMS(5.0) 是一款基于PHP和MySQL的内容管理系统原生全栈开发框架，开源协议为AGPLv3，没有任何附加条款。系统可以通过命令行一键安装，源码方面不基于任何第三方框架，不使用任何脚手架，仅依赖一些常见的第三方类库如图表组件等，您只需要了解最基本的前端知识就能很敏捷的进行二次开发，同时我们对于常见的前端功能做了Web Component方式的封装，即便是您仅了解HTML/CSS也

下载

function Component(props) {
  this.props = props
  this.state = this.state || {}
}

Component.prototype.setState = function() {
  this.state = Object.assign({}, this.state, updateObj) // 这里简单实现，后续篇章会深入探究
  const returnVdom = this.render() // 重新渲染
  document.getElementById('root').innerHTML = null
  render(returnVdom, document.getElementById('root'))
}

此时虽然已经实现了 setState 的功能，但是 document.getElementById('root') 节点写死在 setState 中显然不是我们希望的，我们将 dom 节点相关转移到 _render 函数中：

Component.prototype.setState = function(updateObj) {
  this.state = Object.assign({}, this.state, updateObj)
  _render(this) // 重新渲染
}

自然地，重构与之相关的 render 函数：

function render(vdom, container) {
  let component
  if (_.isFunction(vdom.nodeName)) {
    if (vdom.nodeName.prototype.render) {
      component = new vdom.nodeName(vdom.attributes)
    } else {
      component = vdom.nodeName(vdom.attributes) // 处理无状态组件：const A = (props) => 
I'm {props.name}
    }
  }
  component ? _render(component, container) : _render(vdom, container)
}

在 render 函数中分离出 _render 函数的目的是为了让 setState 函数中也能调用 _render 逻辑。完整 _render 函数如下：

function _render(component, container) {
  const vdom = component.render ? component.render() : component
  if (_.isString(vdom) || _.isNumber(vdom)) {
    container.innerText = container.innerText + vdom
    return
  }
  const dom = document.createElement(vdom.nodeName)
  for (let attr in vdom.attributes) {
    setAttribute(dom, attr, vdom.attributes[attr])
  }
  vdom.children.forEach(vdomChild => render(vdomChild, dom))
  if (component.container) {  // 注意：调用 setState 方法时是进入这段逻辑，从而实现我们将 dom 的逻辑与 setState 函数分离的目标；知识点: new 出来的同一个实例
    component.container.innerHTML = null
    component.container.appendChild(dom)
    return
  }
  component.container = container
  container.appendChild(dom)
}

让我们用下面这个用例跑下写好的 react 吧！

class A extends Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 1
    }
  }

  click() {
    this.setState({
      count: ++this.state.count
    })
  }

  render() {
    return (
      

        Click Me!
        
{this.props.name}:{this.state.count}
      

    )
  }
}

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

效果图如下：

对于vue中config/index.js:配置的详解

对于Angular template syntax的讲解