什么是 React 的工作流 [英] What is workflow of the React

问题描述

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

var TodoList = React.createClass({渲染:函数(){var createItem = function(itemText) {返回 
{itemText}
;};返回 
{this.props.items.map(createItem)}
;}});var TodoApp = React.createClass({getInitialState: 函数() {返回 {items: [], text: ''};},onChange:函数(e){this.setState({text: e.target.value});},句柄提交:函数(e){e.preventDefault();var nextItems = this.state.items.concat([this.state.text]);var nextText = '';this.setState({items: nextItems, text: nextText});},渲染:函数(){返回 (<div><h3>待办事项</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></表单>

);}});React.renderComponent(, mountNode);

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

解决方案

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

初始化

一切都从这一行开始:

React.renderComponent(, mountNode);

这会实例化调用的 TodoApp 组件:

TodoApp::getInitialState()

然后，它呈现 TodoApp 组件

TodoApp::render()

依次实例化一个 TodoList

TodoList::render()

此时，我们拥有了渲染初始标记所需的一切

<h3>待办事项</h3><ul></ul><!-- <待办事项列表>--><表格><输入值=""/><button>添加#1</button></表单>

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

OnChange

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

TodoApp::onChange

将被调用，这将被调用

TodoApp::setState

然后会调用

TodoApp::render

再次生成更新后的 DOM

<h3>待办事项</h3><ul></ul><!-- <待办事项列表>--><表格><input value="sometext"/><button>添加#1</button></表单>

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

 
<输入- 值=""+ 值=一些文本"

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

The code below is from React, which updates the DOM dynamically. I used the tutorial by Facebook react but did not understand the whole code, i.e which part of the code executes when and how it triggers the rest of the parts in the code. Please kindly help me in understanding the code.

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);

The above code is used to dynamically update the DOM structure. This code is referred from http://facebook.github.io/react/ so please help in knowing the work process of the code.

解决方案

Thanks, that's a very good question. Here's a rough overview of what is happening behind the scenes:

Initialization

It all starts with this line:

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

This instantiate the TodoApp component which calls:

TodoApp::getInitialState()

then, it renders the TodoApp component

TodoApp::render()

which in turns instantiate a TodoList

TodoList::render()

At this point, we have everything we need in order to render the initial markup

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

It is stringified and added inside of mountNode via innerHTML

OnChange

Then let's say you're going to enter some text in the input, then

TodoApp::onChange

is going to be called, which is going to call

TodoApp::setState

and in turn will call

TodoApp::render

again and generate the updated DOM

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

What's happening at this point is that React is going to do a diff between the previous DOM and the current one.

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

Only the value of the input changed, so React is going to just update this particular attribute in the real DOM.

这篇关于什么是 React 的工作流的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！