React组件/元素与实例分析
作者:Dan Abramov 前言很多React新手对Components以及他们的instances和elements之间的区别感到非常困惑,为什么要用三种不同的术语来代表那些被渲染在荧屏上的内容呢? 亲自管理实例(Managing the Instances)如果是刚入门React,那么你应该只是接触过一些组件类(component classes)以及实例(instances)。打比方,你可能通过 在这种传统UI模式上,你需要负责创建和删除实例(instances)的子组件实例。如果一个 class Form extends TraditionalObjectOrientedView { render() { // Read some data passed to the view const { isSubmitted,buttonText } = this.attrs; if (!isSubmitted && !this.button) { // Form is not yet submitted. Create the button! this.button = new Button({ children: buttonText,color: 'blue' }); this.el.appendChild(this.button.el); } if (this.button) { // The button is visible. Update its text! this.button.attrs.children = buttonText; this.button.render(); } if (isSubmitted && this.button) { // Form was submitted. Destroy the button! this.el.removeChild(this.button.el); this.button.destroy(); } if (isSubmitted && !this.message) { // Form was submitted. Show the success message! this.message = new Message({ text: 'Success!' }); this.el.appendChild(this.message.el); } } } 这个只是伪代码,但是这个就是大概的形式。特别是当你用一些库(比如Backbone),去写一些需要保持数据同步的组件化组合的UI界面时候。 每一个组件实例需要保留它的DOM节点引用和子组件的实例,并且需要在合适时机去创建、更新、删除那些子组件实例。代码行数会随着组件的状态(state)数量,以平方几何级别增长。而且这样,组件需要直接访问它的子组件实例,使得这个组件以后非常难解耦。 于是,React又有什么不同呢? 用元素来描述节点树(Elements Describe the Tree)React提出一种元素(elements)来解决这个问题。一个元素仅仅是一个纯的JSON对象,用于描述这个组件的实例或者是DOM节点(译者注:比如div)和组件所需要的参数。元素仅仅包括三个信息:组件类型(例如, 一个元素(element)实际上并不等于组件的实例,更确切地说,它是一种方式,去告诉React在荧屏上渲染什么,你并不能调用元素的任何方法,它仅仅是一个不可修改的对象,这个对象带有两个字段: DOM元素(DOM Element)当一个元素的 { type: 'button',props: { className: 'button button-blue',children: { type: 'b',children: 'OK!' } } } 这个元素只是用一个纯的JSON对象,去代表下面的HTML: <button class='button button-blue'> <b> OK! </b> </button> 需要注意的是,元素之间是怎么嵌套的。按照惯例,当我们想去创建一棵元素树(译者注:对,有点拗口),我们会定义一个或者多个子元素作为一个大的元素(容器元素)的 最重要的是,父子元素都只是一种描述符,并不是实际的实例(instances)。在他们被创建的时候,他们不会去引用任何被渲染在荧屏上的内容。你可以创建他们,然后把他们删掉,这并不会对荧屏渲染产生任何影响。 React元素是非常容易遍历的,不需要去解析,理所当然的是,他们比真实的DOM元素轻量很多————因为他们只是纯JSON对象。 组件元素(Component Elements)然而,元素的 { type: Button,props: { color: 'blue',children: 'OK!' } } 这就是React的核心灵感! 一个描述另外一个组件的元素,依旧是一个元素,就像刚刚描述DON节点的元素那样。他们可以被嵌套(nexted)和相互混合(mixed)。 这种特性可以让你定义一个 const DangerButton = ({ children }) => ({ type: Button,props: { color: 'red',children: children } }); 在一个元素树里面,你可以混合配对DOM和组件元素: const DeleteAccount = () => ({ type: 'div',props: { children: [{ type: 'p',props: { children: 'Are you sure?' } },{ type: DangerButton,props: { children: 'Yep' } },{ type: Button,props: { color: 'blue',children: 'Cancel' } }] }); 或者可能你更喜欢JSX: const DeleteAccount = () => ( <div> <p>Are you sure?</p> <DangerButton>Yep</DangerButton> <Button color='blue'>Cancel</Button> </div> ); 这种混合配对有利于保持组件的相互解耦关系,因为他们可以通过组合(componsition)独立地表达
组件封装元素树(Components Encapsulate Element Trees)当React看到一个带有 当React看到这种元素: { type: Button,children: 'OK!' } } 就会去获取 { type: 'button',children: 'OK!' } } } React会不断重复这个过程,直到它获取这个页面所有组件潜在的DOM标签元素。 React就像一个孩子,会去问“什么是 Y”,然后你会回答“X 是 Y”。孩子重复这个过程直到他们弄清楚这个世界的每一个小的细节。 还记得上面提到的 const Form = ({ isSubmitted,buttonText }) => { if (isSubmitted) { // Form submitted! Return a message element. return { type: Message,props: { text: 'Success!' } }; } // Form is still visible! Return a button element. return { type: Button,props: { children: buttonText,color: 'blue' } }; }; 就是这么简单!对于一个React组件, 被组件返回的元素树可能包含描述DOM节点的子元素,和描述其他组件的子元素。这可以让你组合UI的独立部分,而不需要依赖他们内部的DOM结构。 React会替我们创建更新和删除实例,我们只需要通过组件返回的元素来描述这些示例,React会替我们管理好这些实例的操作。 组件可能是类或者函数(Components Can Be Classes or Functions)在上面提到的例子里, // 1) As a function of props // 1) 作为一个接收props参数的函数 const Button = ({ children,color }) => ({ type: 'button',props: { className: 'button button-' + color,props: { children: children } } } }); // 2) Using the React.createClass() factory // 2) 使用React.createClass()的工厂方法 const Button = React.createClass({ render() { const { children,color } = this.props; return { type: 'button',props: { className: 'button button-' + color,children: { type: 'b',props: { children: children } } } }; } }); // 3) As an ES6 class descending from React.Component // 3) 作为一个ES6的类,去继承React.Component class Button extends React.Component { render() { const { children,props: { children: children } } } }; } } 当组件被定义为类,它会比起函数方法的定义强大一些。它可以存储一些本地状态(state)以及在相应DOM节点创建或者删除时候去执行一些自定义逻辑。 一个函数组件会没那么强大,但是会更简洁,而且可以通过一个 然而,不管是函数组件或者类组件,基本来说,他们都属于React组件。他们都会以props作为输入内容,以元素作为输出内容 自顶向下的协调(Top-Down Reconciliation)当你调用: ReactDOM.render({ type: Form,props: { isSubmitted: false,buttonText: 'OK!' } },document.getElementById('root')); React会提供那些 // React: You told me this... { type: Form,buttonText: 'OK!' } } // React: ...And Form told me this... { type: Button,props: { children: 'OK!',color: 'blue' } } // React: ...and Button told me this! I guess I'm done. { type: 'button',props: { children: 'OK!' } } } } 这部分过程被React称作协调(reconciliation),在你调用 这个逐步精炼的过程也说明了为什么React应用如此容易优化。如果你的组件树一部分变得太庞大以至于React难以去高效访问,在相关参数没有变化的情况下,你可以告诉React去跳过这一步“精炼”以及跳过diff树的其中一部分。如果参数是不可修改的,计算出他们是否有变化会变得相当快。所以React和immutability结合起来会非常好,而且可以用最小的代价去获得最大的优化。 你可能发现这篇博客一开始谈论到很多关于组件和元素的内容,但是并没有太多关于实例的。事实上,比起大多数的面向对象UI框架,实例在React上显得并没有那么重要。 只有类组件可以拥有实例,而且你从来不需要直接创建他们:React会帮你做好。当存在父组件实例访问子组件实例的情况下,他们只是被用来做一些必要的动作(比如在一个表单域设置焦点),而且通常应该要避免这样做。 React为每一个类组件维护实例的创建,所以你可以以面向对象的方式,用方法和本地状态去编写组件,但是除此之外,实例在React的变成模型上并不是很重要,而且会被React自己管理好。 总结元素是一个纯的JSON对象,用于描述你想通过DOM节点或者其他组件在荧屏上展示的内容。元素可以在他们的参数里面包含其他元素。创建一个React元素代价非常小。一个元素一旦被创建,将不可更改。 一个组件可以用几种不同的方式去声明。可以是一个带有 如果有一个组件被调用,传入了一些参数作为输入,那是因为有一某个父组件返回了一个带有这个组件的 实例就是你在组件上调用this时候得到的东西,它对本地状态存储以及对响应生命周期事件非常有用。 函数组件根本没有实例,类组件拥有实例,但是你从来都不需要去直接创建一个组件实例——React会帮你管理好它。 最后,想要创建元素,使用 更多相关内容
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |