over 3 years ago

傳統的 React.createClass 跟 React.Component 宣告

React.createClass

const Pane = React.createClass({
  propTypes: {
    label: React.PropTypes.string.isRequired,
    children: React.PropTypes.element.isRequired
  },
  render() {
    return (
      <div>
        {this.props.children}
      </div>
    );
  }
});

React.Component

class Pane extends React.Component {
  render() {
    return (
      <div>
        {this.props.children}
      </div>
    );
  }
}
Pane.propTypes = {
  label: React.PropTypes.string.isRequired,
  children: React.PropTypes.element.isRequired
};

React v0.14.0 時所推出的 stateless components 宣告方式

stateless components

const Pane = (props) => <div>{props.children}</div>;

或者是 ES5 syntax

var Pane = function (props) {
  return <div>{props.children}</div>;
};

配上 ES6 syntax

const Pane = (props) => <div>{props.children}</div>;
Pane.propTypes = {
  label: React.PropTypes.string.isRequired,
  children: React.PropTypes.element.isRequired
};

比對 React.createClass 跟 React.Component 建構 Component
stateless components 的方式少了 React.xxx 也可省略 render 的呼叫
不過這種建構方式目前不支援相關的 lifecycle 函數
如果只是單純的接收 props 來直接配置 Component 內容的話
就可以考慮使用 stateless components 的方式

況且針對 state 的操作還是讓 main Component 去控制
和配置包覆內 stateless components 的 props 是最好不過了

參考網址
https://toddmotto.com/stateless-react-components/

← React.createClass 與 extends React.Component React 圖片遮罩 component →
 
comments powered by Disqus