React中元素与组件的区别
在初学 React 的时候,分不清 React 组件和 React 元素,着实踩了一些坑。搞清楚 React 中什么是组件,什么是元素,既可以理清楚概念,也可以让你避免一些不必要的错误。 React 元素React 元素(React element),它是 React 中最小基本单位,我们可以使用 JSX 语法轻松地创建一个 React 元素: const element = <div className="element">I'm element</div> React 元素不是真实的 DOM 元素,它仅仅是 js 的普通对象(plain objects),所以也没办法直接调用 DOM 原生的 API。上面的 JSX 转译后的对象大概是这样的: { _context: Object,_owner: null,key: null,props: { className: 'element', children: 'I'm element' },ref: null,type: "div" } 只有在这个元素渲染被完成后,才能通过选择器的方式获取它对应的 DOM 元素。不过,按照 React 有限状态机的设计思想,应该使用状态和属性来表述组件,要尽量避免 DOM 操作,即便要进行 DOM 操作,也应该使用 React 提供的接口 除了使用 JSX 语法,我们还可以使用 React.createElement()JSX 语法就是用 React.createElement( type,[props],[...children] ) React.cloneElement()
React.cloneElement( element,[...children] ) React 组件React 中有三种构建组件的方式。 React.createClass()
var Greeting = React.createClass({ render: function() { return <h1>Hello,{this.props.name}</h1>; } }); ES6 class
class Greeting extemds React.Component{ render: function() { return <h1>Hello,{this.props.name}</h1>; } }; 无状态函数无状态函数是使用函数构建的无状态组件,无状态组件传入 function Greeting (props) { return <h1>Hello,{props.name}</h1>; }
元素与组件的区别组件是由元素构成的。元素数据结构是普通对象,而组件数据结构是类或纯函数。除此之外,还有几点区别要注意: this.props.children在 JSX 中,被元素嵌套的元素会以属性 children 的方式传入该元素的组件。当仅嵌套一个元素时,children 是一个 React 元素,当嵌套多个元素时,children 是一个 React 元素的数组。可以直接把 children 写入 JSX 的中,但如果要给它们传入新属性,就要用到 render () { var Child = this.props.children return <div><Child tip={'error!'}/><div> } 因为 Child 是一个 React 元素,而不是组件,这样的写法是完全错误的,正确的方式应该是: render () { var child = this.props.children return <div>{ React.cloneElement(child,{tip: 'right way!'}) }<div> } 就这样,原有属性和新添加的属性被一并传入了子元素。使用 用户组件有的时候,组件可以让用户以属性的方式传入自定义的组件,来提升组件的灵活性。这个属性传入的就应该是 React 元素,而非 React 组件。使用 React 元素可以让用户传入自定义组件的同时,为组件添加属性。同样,可以使用 // 推荐 <MyComponent tick={ <UserComponent tip="Yes"/> } /> // 不推荐 <MyComponent tick={ UserComponent } /> 最后最后,打个不恰当的比喻,React 组件是 AD新开博客,更多文章,陆续更新中... (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |