Reactjs:使用React组件比普通函数更有优势吗?
发布时间:2020-12-15 20:48:59 所属栏目:百科 来源:网络整理
导读:从React.js文档中获取例如 this sample var Avatar = React.createClass({ render: function() { return ( div ProfilePic username={this.props.username} / ProfileLink username={this.props.username} / /div ); }});var ProfilePic = React.createClass
从React.js文档中获取例如
this sample
var Avatar = React.createClass({ render: function() { return ( <div> <ProfilePic username={this.props.username} /> <ProfileLink username={this.props.username} /> </div> ); } }); var ProfilePic = React.createClass({ render: function() { return ( <img src={'http://graph.facebook.com/' + this.props.username + '/picture'} /> ); } }); var ProfileLink = React.createClass({ render: function() { return ( <a href={'http://www.facebook.com/' + this.props.username}> {this.props.username} </a> ); } }); React.render( <Avatar username="pwh" />,document.getElementById('example') ); 对于这样的情况,组件没有状态,如果我不打算使用jsx:是否有任何缺点(性能或其他方面)只使用函数而不是创建组件? IE,将它减少到这样的东西(用ES6编写) var { a,div,img } = React.DOM; var Avatar = (username) => div({},ProfilePic(username),ProfileLink(username)); var ProfilePic = (username) => img({src: `http://graph.facebook.com/${username}/picture`}); var ProfileLink = (username) => a({href: `http://www.facebook.com/${username}`},username); React.render(Avatar(username),document.getElementById('example'))
如果您不使用JSX,并且不需要核心类的任何运行时功能(例如componentDidMount等),那么不必要地创建类就没有优势,事实上,它(稍微)整体效率更高.
通过创建具体(但非常简单)的包装函数,例如您使用“阿凡达”,它可以提高代码的可读性.但是,如果您开始使用JSX,则需要切换到createClass以便正确传递属性(因为初始属性不会像在代码中那样传递给构造函数). (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |