15. React 中 Component 的三种写法
一天一个小技巧，小轻今天给大家介绍的是：React中组件的三种写法。
奉上封面图
ES5 - React.createClass
ES6 - React.Component
纯组件 / 函数组件 / 无状态组件
// 输出一个 Hello World 示例
var React = require('react');
var ReactDOM = require('react-dom');
var SayHello = React.createClass({
getDefaultProps: function() {
return { words: "Hello World" }
}
getInitialState: function() {
return { words: this.props.words }
}
render: function() {
return <div> {this.state.words} </div>
}
});
ReactDOM.render(
<SayHello />,
document.getElementById("root")
);
// 输出一个 Hello World 示例
import React from 'react';
import { render } from 'react-dom';
class SayHello extends React.Componet {
constructor(props) {
super(props)
this.state = {
words: this.props.words
}
// 此处也可以绑定 this, 然后就可以在 function 里面使用 this.state等
// this.defineFunc = this.defineFunc.bind(this);
};
render() {
return <div> {this.state.words} </div>
}
};
// 设置默认props
SayHello.defaultProps = {
words: "Hello World"
}
render(
<SayHello />,
document.getElementById("root')
);
// 输出一个 Hello World 示例
const SayHello = ({ ...props }) => (
<div> {props.words} </div>
)
// 使用方法，在父组件中定义 words，定义什么就显示什么
<SayHello words="Hello World" />
-
纯组件不需要额外绑定 this , 不会被实例化 -
React.Component 可以选择性的绑定 (bind) this -
React.createClass 则是自动绑定
-
纯组件无法使用 this.state，本身没有 state -
React.Component 在 contructor 里面通过 this.state 设置 -
React.createClass 使用 getInitialState 设置
-
纯组件：从父组件 / 高阶组件 接收 -
React.Component：在 constructor 里面通过 super 继承，使用defaultProps 定义 -
React.createClass：在 getDefaultProps 里面定义