React从入门到精通系列之(17)不使用ES6编写React应用
十七、不使用ES6编写React应用通常你可以使用一个JavaScript的class功能来定义一个React组件: class Greeting extends React.Component { render() { return <h1>hello {this.props.name}</h1>; } } 要是你还没有使用ES6的话,你就得使用 var Greeting = React.createClass({ render: function() { return <h1>hello {this.props.name}</h1>; } }); 使用ES6的 定义PropTypes和Props默认值对于 class Greeting extends React.Component { // 内部逻辑 } Greeting.propTypes = { name: React.PropTypes.string.isRequired } Greeting.defaultProps = { name: 'zhangyatao' } 对于 var Greeting = React.createClass({ propTypes: { name: React.PropTypes.name.isRequired } getDefaultProps: function() { return {name: 'zhangyatao'} } // 内部逻辑 }); 设置初始化state在ES6的 class Greeting extends React.Component { constructor(props) { super(props); this.state = {name: 'zhangyatao'}; } // 业务逻辑 } 对于 var Greeting = React.createClass({ getInitialState: function() { return {name: 'zhangyatao'}; } // 内部逻辑 }) 自动绑定this在通过ES6的 class ShowMyName extends React.Component { constructor(props) { super(props); this.name = 'zhangyatao'; this.showName = this.showName.bind(this); } showName() { console.log('我的名字是',this.name); } render() { return ( <button onClick={this.showName}> 打印我的名字 </button> ); } } 对于 var ShowName = React.createClass({ name: 'zhangyatao',showName: function() { console.log('我的名字是',this.name); },render: function() { return <button onClick={this.showName}>打印我的名字</button>; } }); 这意味着编写通过 如果代码这么写的话太不吸引你,你大可以在使用Babel时启用那些处于 class ShowName extends React.Component { constructor(props) { super(props); this.name = 'zhangyatao'; } // 使用箭头函数,因为剪头函数会直接绑定this click = () => { console.log('我的名字是',this.name) } render() { return <button onClick={this.click}>打印我的名字</button>; } } 如果你想安全地摆弄这些东西,你有几个选择:
混合(mixins)属性
有时,一些不同的组件需要共享一些常见的功能。 一般称为 一个比较常见的用例就是你希望通过一定的时间间隔来更新组件自身。 var SetIntervalMixin ={ // 组件将要被装载到DOM中 componentWillMount: function() { this.intervals = []; },setInterval: function() { this.intervals.push(setInterval.apply(null,arguments)); },// 组件将要从DOM中卸载 componentWillUnmount: function() { this.intervals.forEach(clearInterval); } } var TickTock = React.createClass({ // 更新mixins mixins: [SetIntervalMixin],// 获取并设置默认state getInitialState: function() { return {seconds: 0}; },// 组件已经被加载到DOM中 componentDidMount: function() { this.setInterval(this.tick,1000); },tick: function() { this.setState(function(prevState) { return {seconds: prevState.seconds + 1}; }); },render: function() { return <p>已经运行了{this.state.seconds}秒</p> } }); ReactDOM.render( <TickTock />,document.getElementById('root') ) 如果一个组件使用多个 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- 如何让Flash不遮挡HTML div元素的技巧_HTML/Xhtml_网页制作
- C++子类父类成员函数的覆盖和隐藏实例详解
- swift – 如何在watchOS复杂中显示图像
- 我所理解的Cocos2d-x 应用程序架构
- c# – IEnumerable ToArray用法 – 它是副本还是指针?
- C#将当前对象传递给另一个对象?
- grep、egrep、fgrep正则表达式
- ruby-on-rails – passenger-install-apache2-module在ubun
- iphone – Xcode错误 – 线程1:信号SIGABRT
- ruby-on-rails – 用于Rails API中的提供程序身份验证的Omn