React建立元件的三種方式

react常見的三種元件建立方式，具體如下：

函式式定義的無狀態元件

es5原生方式react.createclass定義的元件

es6形式的extends react.component定義的元件

下面我們簡單說一下，這三種方式的用法、適用場合以及區別

import react,  from 'react';

import proptypes from 'prop-types';
const nostate = (props) => = props;
const sayhi = () => `);
}; return (
我是無狀態元件
props.name--
say hello )}
nostate.proptypes = ;
export default nostate;

2、元件無法訪問this物件，只能訪問傳入的props，所以渲染結果只於傳入的props有關

3、無狀態元件不需要生命週期管理與狀態管理，內部沒有相關實現。可以判斷傳入的型別

總結較大的元件應該被多個無狀態元件分割，未來react也會這種面向無狀態元件在譬如無意義的檢查和記憶體分配領域進行一系列優化，所以只要有可能，盡量使用無狀態元件

寫法

1、react.createclass定義的元件

import react from 'react';

import reactdom from 'react-dom';
import proptypes from 'prop-types';
const createclasscom = react.createclass(,
getdefaultprops:function() 
}, getinitialstate: function() ; 
}, handleclick: function(event) ); 
}, render: function() 
state.name--
改變name
); } 
});export default createclasscom;

import react,  from "react";

import reactdom from 'react-dom';
import proptypes from 'prop-types';
export default class compinentcom extends component 
}handleclick (event) ); 
};render() 
state.name--
無bind改變name
bind改變name
); } 
};compinentcom.proptypes = 
compinentcom.defaultprops =

1、createclass自動繫結this，component需要手動繫結this。createclass會導致不必要的效能開銷

2、createclass不可用constructor，用之會報錯，預設props，state用getdefaultprops，getinitialstate。

component用constructor(props)}

不可用getdefaultprops，getinitialstate用之有warning。

3、react.16之後不可以再用createclass

React三種建立元件的方式

react一共有三種建立方式 1 函式式定義的無狀態元件 2 es5原生方式react.createclass建立元件 3 es6繼承react.component方式 無狀態函式式元件是乙個只帶有render方法的函式，並且該元件是無狀態的，具體的形式如下 function hello props...

React建立元件的三種方式及其區別

react建立元件的三種方式及其區別 三種方式 函式式定義的無狀態元件es5原生方式react.createclass定義的元件 es6形式的extends react.component定義的元件 function hellocomponent props,context reactdom.ren...

React建立元件的三種方式及其區別

1.函式定義式的無狀態元件 建立純展示元件，只負責根據傳入的props來展示，不涉及state的操作。無狀態函式式元件形式上表現為乙個直帶有乙個render方法的元件類。function hellocomponent props reacrdom.render mountnode 特點是精簡，避免冗...