什么是 React 的工作流

IT技术 javascript reactjs
2021-05-11 08:39:14

下面的代码来自React，它动态更新 DOM。我使用了 Facebook react 的教程，但没有理解整个代码，即代码的哪一部分在何时以及如何触发代码中的其余部分。请帮助我理解代码。

var TodoList = React.createClass({
  render: function() {
    var createItem = function(itemText) {
      return <li>{itemText}</li>;
    };
    return <ul>{this.props.items.map(createItem)}</ul>;
  }
});

var TodoApp = React.createClass({
  getInitialState: function() {
   return {items: [], text: ''};
  },

  onChange: function(e) {
    this.setState({text: e.target.value});
  },

  handleSubmit: function(e) {
    e.preventDefault();
    var nextItems = this.state.items.concat([this.state.text]);
    var nextText = '';
    this.setState({items: nextItems, text: nextText});
  },

  render: function() {
    return (
      <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <input onChange={this.onChange} value={this.state.text} />
          <button>{'Add #' + (this.state.items.length + 1)}</button>
        </form>
      </div>
    );
   }
});
React.renderComponent(<TodoApp />, mountNode);

以上代码用于动态更新DOM结构。此代码来自http://facebook.github.io/react/，因此请帮助了解代码的工作过程。

2个回答

谢谢，这是一个很好的问题。以下是对幕后发生的事情的粗略概述：

初始化

这一切都从这一行开始：

React.renderComponent(<TodoApp />, mountNode);

这实例化了调用的 TodoApp 组件：

TodoApp::getInitialState()

然后，它呈现 TodoApp 组件

TodoApp::render()

依次实例化一个 TodoList

TodoList::render()

在这一点上，我们拥有了渲染初始标记所需的一切

<div>
  <h3>TODO</h3>
  <ul></ul> <!-- <TodoList> -->
  <form>
    <input value="" />
    <button>Add #1</button>
  </form>
</div>

它被字符串化并通过innerHTML添加到mountNode内部

OnChange

然后假设您要在输入中输入一些文本，然后

TodoApp::onChange

将被调用，这将调用

TodoApp::setState

反过来会打电话

TodoApp::render

再次生成更新的 DOM

<div>
  <h3>TODO</h3>
  <ul></ul> <!-- <TodoList> -->
  <form>
    <input value="sometext" />
    <button>Add #1</button>
  </form>
</div>

此时发生的事情是 React 将在之前的 DOM 和当前的 DOM 之间做一个差异。

    <div>
      <input
-       value=""
+       value="sometext"

只有输入的值发生了变化，所以 React 将只更新真实 DOM 中的这个特定属性。

你可以在React 官方页面上找到更一般的解释。通常，react 生命周期可以通过以下阶段来描述（一旦组件被创建，可以重复多次）：

初始化值（仅一次）：

    constructor(){ ... }

安装，如果您需要在初始渲染后添加一些内容（仅一次）：

    componentDidMount(){...}

重新渲染函数、变量和组件

    myArrowFunction = () => {
      ...
      this.setState({...})
      ...  
    }

更新：

    componentDidUpdate()}{...}
    shouldComponentUpdate(){...}

卸载：

    componentWillUnmount(){...}

渲染发生在这里

    render(){...}
其它你可能感兴趣的问题
上一篇喷嘴从起始位置移动到起始位置非常缓慢 下一篇Delta Kossel 3d 打印机散热器问题