[译]React 元素 vs React 组件 vs 组件支撑实例
本篇为译文,原文出处:React Elements vs React Components vs Component Backing Instances 许多人可能听说过 Facebook 的 React 库,并在自己的工作或项目中使用它。React 是非常流行的,使开发用户界面变得简单且符合声明式编程(译者注:声明式编程可以参考声明式编程和命令式编程的比较)。 正如题目所示,React 有几个概念遍及其文档,这(几个概念)可能会让新React用户困惑。例如,你在 Glossary、Top-Level API 和 Explanation on Refs 这几章中检索 “React Element”、“React Component” 和 “Component Backing Instance”,你会发现这几个术语遍及各处,已经是 React 的绝对的核心。 这篇文章不是一篇 React 的教程,更多的是分享我最近学习 React 而得到的一些(知识)。因此,这篇文章是针对之前已经涉猎过 React 的人们,我会假设你已经熟悉 React 一些核心概念和语法。 React元素是什么?React 元素这个概念对于 React 来说很重要,但是我坚信一点,因为使用 React 和 JSX 来构建用户界面过于简单,从而导致可能在最初错过这个概念。如果你之前用过 React + JSX,毫无疑问的说,在你的 JS 文件中书写类 HTML 语法更加符合你的习惯(译者注:Habit is second nature. 习惯成自然)。在这种(书写类HTML语法)假象之下,JSX 语法实际上被编译成特殊的函数调用 — // 使用 JSX 语法 var helloWorld = <div>Hello World!</div>; // 然后是 JSX 被编译成 JavaScript 后的结果 var helloWorld = React.createElement( "div",null,"Hello World!" ); // 再是处理成 JavaScript 简单对象后看起来类似这样 var helloWorld = { key: null,props: { children: "Hello World!" // more stuff in here },ref: null,type: "div" // more stuff in here }; React 元素是由一些属性(properties)构成的 JavaScript 简单对象(plain old JavaScript objects,译者注:关于更多解释可以看 Plain Old JavaScript,What is a plainObject in JavaScript?):
此时,了解每个属性所有细节并不重要。最大的收获在于,React 元素仅仅是 JavaScript 简单对象(plain old JavaScript objects),用来描述组件的 HTML 应是怎样的结构,这个对象上不包含任何方法(Methods),仅仅只有数据。 通过之前 React组件是什么?不同于 React 元素,你可能对 React 组件更熟悉一些。如果你曾写过类似下面例子的代码,那么你之前已经创建过 React 组件类了: // 这是一个 React 组件类 class CustomForm extends React.Component { constructor(props) { super(props); this.state = { inputText: "Willson" }; this.handleInputChange = this.handleInputChange.bind(this); } handleInputChange(e) { const inputText = e.target.value; this.setState({ inputText }); } render() { return ( <div className="custom-form"> <div className="custom-form-header"> <p>Hello,{this.state.inputText}</p> </div> <div className="custom-form-body"> <input type="text" value={this.state.inputText} onChange={this.handleInputChange} /> </div> </div> ); } } /* * 我假设你有可用的 React 和 ReactDom,以及 * 一个 id 为 "root" 的 HTML 元素 * ReactDOM.render() 的返回值是组件实例 */ var componentInstance = ReactDOM.render(<CustomForm />,document.getElementById("root")); 上面的例子是用 ES2015 新的 Class 语法写的,但它几乎相当于使用 假如你熟悉 JavaScript 的话,当你听到到“实例化一个类”且智商在线时,你可能会考虑使用 从 与 组件支撑实例是什么?前两节探讨了 React 元素和 React 组件实例,这两个概念都是 DOM 之上的抽象层。 现在我们将讨论术语“组件支撑实例”,以及它们自身如何与真实 DOM 元素相关联。 // 组件类 class CustomForm extends React.Component { constructor(props) { super(props); this.state = { inputText: "Willson" }; this.handleInputChange = this.handleInputChange.bind(this); } handleInputChange(e) { const inputText = e.target.value; this.setState({ inputText }); } render() { return ( <div className="custom-form"> <div className="custom-form-header"> <p>Hello,{this.state.inputText}</p> </div> <div className="custom-form-body"> <input type="text" value={this.state.inputText} onChange={this.handleInputChange} /> </div> </div> ); } } // 组件实例 var componentInstance = ReactDOM.render(<CustomForm />,document.getElementById("root")); // DOM 实例 var domInstance = ReactDOM.findDOMNode(componentInstance); // 原文作者这里出了个 Bug,多了一个 D 在前面的实例中, 总结这3个术语“React 元素”,“React 组件”和“组件支撑实例”是密切相关的。 由于 JSX 语法被转译为 我希望这篇文章能够帮助你理清这些术语! [参考资料]
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |