React 應(yīng)用都是構(gòu)建在組件之上。
組件作為React的核心內(nèi)容，是View的重要組成部分，每一個(gè)View頁(yè)面都由一個(gè)或多個(gè)組件構(gòu)成，可以說(shuō)組件是React應(yīng)用程序的基石。在React的組件構(gòu)成中，按照狀態(tài)來(lái)分可以分為有狀態(tài)組件和無(wú)狀態(tài)組件。
組件化的概念在后端早已存在多年，只不過(guò)近幾年隨著前端的發(fā)展，這個(gè)概念在前端開(kāi)始被頻繁提及，特別是在MV*的框架中。
前端中的“組件化”這個(gè)詞，在UI這一層通常指“標(biāo)簽化”，也就是把大塊的業(yè)務(wù)界面，拆分成若干小塊，然后進(jìn)行組裝。
狹義的組件化一般是指標(biāo)簽化，也就是以自定義標(biāo)簽（自定義屬性）為核心的機(jī)制。
廣義的組件化包括對(duì)數(shù)據(jù)邏輯層業(yè)務(wù)梳理，形成不同層級(jí)的能力封裝。
標(biāo)準(zhǔn)性
任何一個(gè)組件都應(yīng)該遵守一套標(biāo)準(zhǔn)，可以使得不同區(qū)域的開(kāi)發(fā)人員據(jù)此標(biāo)準(zhǔn)開(kāi)發(fā)出一套標(biāo)準(zhǔn)統(tǒng)一的組件。
組合性
組件之前應(yīng)該是可以組合的。我們知道前端頁(yè)面的展示都是一些HTML DOM的組合，而組件在最終形態(tài)上也可以理解為一個(gè)個(gè)的HTML片段。那么組成一個(gè)完整的界面展示，肯定是要依賴不同組件之間的組合，嵌套以及通信。
重用性
任何一個(gè)組件應(yīng)該都是一個(gè)可以獨(dú)立的個(gè)體，可以使其應(yīng)用在不同的場(chǎng)景中。
可維護(hù)性
任何一個(gè)組件應(yīng)該都具有一套自己的完整的穩(wěn)定的功能，僅包含自身的，與其它組件無(wú)關(guān)的邏輯，使其更加的容易理解，使其更加的容易理解，同時(shí)大大減少發(fā)生bug的幾率。
無(wú)狀態(tài)函數(shù)式組件形式上表現(xiàn)為一個(gè)只帶有一個(gè)render()方法的組件類，通過(guò)函數(shù)形式或者ES6 箭頭function的形式在創(chuàng)建，并且該組件是無(wú)state狀態(tài)的。具體的創(chuàng)建形式如下
重慶分公司
重慶分公司
import React from 'react';
//定義一個(gè)React組件
function App() {
return (
hello React...
);
}
export default App;React.Component是以ES6的形式來(lái)創(chuàng)建react的組件的，是React目前極為推薦的創(chuàng)建有狀態(tài)組件的方式，形式改為React.Component形式如下
import React from 'react';
//定義一個(gè)React組件
class App extends React.Component{
render(){
return (
Hello，Reactjs??！
);
}
}
export default App;在其他文件中引用組件
import React from 'react';
import ReactDOM from 'react-dom';
//App組件，組件要求大寫字母開(kāi)頭
import App from './App';
ReactDOM.render(用構(gòu)造函數(shù)創(chuàng)建出來(lái)的組件，叫做“無(wú)狀態(tài)組件”；
用class關(guān)鍵字創(chuàng)建出來(lái)的組件，叫做“有狀態(tài)組件”；
有狀態(tài)組件和無(wú)狀態(tài)組件之間的本質(zhì)區(qū)別是有無(wú)state屬性。
注意：
使用
class關(guān)鍵字創(chuàng)建的組件，有自己的私有數(shù)據(jù)（this.state）和生命周期函數(shù)；使用
function創(chuàng)建的組件，只有props，沒(méi)有自己的私有數(shù)據(jù)和生命周期函數(shù)；
函數(shù)組件和類組件當(dāng)然是有區(qū)別的，而且函數(shù)組件的性能比類組件的性能要高，因?yàn)轭惤M件使用的時(shí)候要實(shí)例化，而函數(shù)組件直接執(zhí)行函數(shù)取返回結(jié)果即可。為了提高性能，盡量使用函數(shù)組件
| 區(qū)別 | 函數(shù)組件 | class組件 |
|---|---|---|
是否有this | 沒(méi)有 | 有 |
| 是否有生命周期 | 沒(méi)有 | 有 |
是否有狀態(tài)state | 沒(méi)有 | 有 |
props屬性react中說(shuō)的單向數(shù)據(jù)流值說(shuō)的就是props，根據(jù)這一特點(diǎn)它還有一個(gè)作用：組件之間的通信。props本身是不可變的，但是有一種情形它貌似可變，即是將父組件的state作為子組件的props，當(dāng)父組件的state改變，子組件的props也跟著改變，其實(shí)它仍舊遵循了這一定律：props是不可更改的。
props屬性的特點(diǎn)：
1.每個(gè)組件對(duì)象都會(huì)有props（properties的簡(jiǎn)寫）屬性
2.組件標(biāo)簽的所有屬性都保存在props中
3.內(nèi)部讀取某個(gè)屬性值：this.props.propertyName
4.作用：通過(guò)標(biāo)簽屬性從組件外 向組件內(nèi)傳遞數(shù)據(jù)（只讀 read only）
5.對(duì)props中的屬性值進(jìn)行類型限制和必要性限制
代碼示例
使用函數(shù)組件：
import React from 'react';
import ReactDOM from 'react-dom';
//使用函數(shù)組件
function User(props){
//在組件中獲取props屬性值
return {props.name}，{props.age}
}
//定義數(shù)據(jù)
const person ={
name:'張三',
age:20,
sex:'男'
}
ReactDOM.render(
使用類組件：
import React from 'react';
import ReactDOM from 'react-dom';
//使用class組件
class User extends React.Component{
render(){
return (
{this.props.name}--{this.props.age}
);
}
}
//數(shù)據(jù)
const person ={
name:'張三',
age:20,
sex:'男'
}
ReactDOM.render(
state屬性React 把組件看成是一個(gè)狀態(tài)機(jī)（State Machines）。通過(guò)與用戶的交互，實(shí)現(xiàn)不同狀態(tài)，然后渲染 UI，讓用戶界面和數(shù)據(jù)保持一致。
React 里，只需更新組件的 state，然后根據(jù)新的 state 重新渲染用戶界面（不要操作 DOM）。
代碼示例：
import React from 'react';
import ReactDOM from 'react-dom';
class Person extends React.Component{
//構(gòu)造方法
constructor(){
super();
this.state = {
name: 'tom'
}
}
render(){
//state屬性是可修改的
this.state.name = 'jack';
return (
{this.state.name}
);
}
}
ReactDOM.render(設(shè)置狀態(tài):setState
setState(object nextState[, function callback])
不能在組件內(nèi)部通過(guò)this.state修改狀態(tài)，因?yàn)樵摖顟B(tài)會(huì)在調(diào)用setState()后被替換。
setState()并不會(huì)立即改變this.state，而是創(chuàng)建一個(gè)即將處理的state。setState()并不一定是同步的，為了提升性能React會(huì)批量執(zhí)行state和DOM渲染。
setState()總是會(huì)觸發(fā)一次組件重繪，除非在shouldComponentUpdate()中實(shí)現(xiàn)了一些條件渲染邏輯
props和state屬性的區(qū)別props中的數(shù)據(jù)都是外界傳遞過(guò)來(lái)的；state中的數(shù)據(jù)都是組件私有的；（通過(guò)Ajax獲取回來(lái)的數(shù)據(jù)，一般都是私有數(shù)據(jù)）props中的數(shù)據(jù)都是只讀的，不能重新賦值；state中的數(shù)據(jù)，都是可讀可寫的；props傳遞數(shù)據(jù)；refs屬性在React數(shù)據(jù)流中，父子組件唯一的交流方式是通過(guò)props屬性；如果要修改子組件，通過(guò)修改父組件的屬性，更新達(dá)到子組件props屬性的值，重新渲染組件以達(dá)到視圖的更新。但是，有些場(chǎng)景需要獲取某一個(gè)真實(shí)的DOM元素來(lái)交互，比如文本框的聚焦、觸發(fā)強(qiáng)制動(dòng)畫等
代碼示例：
import React from 'react';
import ReactDOM from 'react-dom';
class Person extends React.Component{
constructor(){
super();
this.handleClick = this.handleClick.bind(this);
}
//點(diǎn)擊事件
handleClick(){
// 使用原生的 DOM API 獲取焦點(diǎn)
this.refs.myInput.focus();
}
render(){
return (
);
}
}
ReactDOM.render(創(chuàng)新互聯(lián)www.cdcxhl.cn，專業(yè)提供香港、美國(guó)云服務(wù)器，動(dòng)態(tài)BGP最優(yōu)骨干路由自動(dòng)選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證， 機(jī)房獨(dú)有T級(jí)流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確進(jìn)行流量調(diào)度，確保服務(wù)器高可用性。佳節(jié)活動(dòng)現(xiàn)已開(kāi)啟，新人活動(dòng)云服務(wù)器買多久送多久。
