gpt4 book ai didi

javascript - React 的工作流程是什么

转载 作者:IT王子 更新时间:2023-10-29 03:21:20 26 4
gpt4 key购买 nike

下面的代码来自 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/所以请帮助了解代码的工作过程。

最佳答案

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

初始化

一切都从这一行开始:

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 中

改变

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

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 中的这个特定属性。

关于javascript - React 的工作流程是什么,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18680213/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com