希望本文能幫助沒接觸過 React 的同學，對React有個大致的理解。

最近要做一個“前端零基礎的入門課程分享”，很多非前端同學可能只是知道 React 是個前端框架，整體對 React 的理解還是很模糊，借此機會，分享一下我對 React 的理解。

最重要的寫在前面

React是一個前端UI庫。我對React的理解主要就兩點：

組件化

數(shù)據(jù)驅動

在React基礎上，周邊生態(tài)提供了更多強大功能：狀態(tài)管理、路由、React Native等。

一、組件化

這里就有了第一個抽象概念：?組件?。

什么是組件？組件是對邏輯的封裝。對于前端 UI 層來說，組件就是將 UI 封裝起來。供任意組裝和調(diào)用。

太抽象了？我提煉成三個點，幫助大家理解：

寫React就是寫組件。將一個界面分成若干個組件，組合包裝成完整頁面

寫每一個組件的時候：每個組件有自己的生命周期，在組件不同的周期里做自己想要做的邏輯

子組件接受父組件的參數(shù)(Props) 、 以及維護組件內(nèi)部的狀態(tài)(State)

最簡單的組件 HelloWorld

下面我們看一個最簡單的類組件 HelloWorld：

// HelloWorld.jsx class HelloWorld extends React.Component {componentDidMount () {console.log('HelloWorld 第一次掛載到界面上');}componentWillUnmount () {console.log('HelloWorld 即將移除（銷毀）');}render() {return (<div>Hello World！</div>);} }

這樣就完成了一個簡單的 ?HelloWorld? 組件。

componentDidMount、componentWillUnmount是兩個常用的生命周期函數(shù)，傳送門：更多生命周期。

render 函數(shù)在每次渲染時調(diào)用，返回的內(nèi)容就是組件最終的界面，示例中return 了一個Hello World 的 div。

子組件調(diào)用示例

再寫一個 按鈕組件 ?HelloButton?

// HelloButton.jsx class HelloButton extends React.Component {render() {return (<button>我是一個按鈕</button>);} }

寫一個父組件 把 HelloWorld 和 HelloButton 兩個組件包裹進來

// Wrap.jsx class Wrap extends React.Component {render() {return (<div><HelloWorld></HelloWorld><HelloButton></HelloButton></div>);} }

可以看到 React 調(diào)用子組件其實就是把子組件當做一個標簽，跟 div 這些標簽一樣。

Wrap 組件最終的展示就是，一個HelloWord 組件 + 一個HelloButton 組件，如下圖。

Wrap組件效果圖

組件化小結

基于對組件化的理解：寫 React 就是寫一個個組件，再組裝起來。所以如果用分治的思想，我們只要關注每個組件怎么實現(xiàn)就好了。

二、數(shù)據(jù)驅動

現(xiàn)在來講我的另一個理解——?數(shù)據(jù)驅動?，那么組件有哪些數(shù)據(jù)呢？

組件有兩種數(shù)據(jù)：父組件傳遞的參數(shù) Props和組件內(nèi)部的狀態(tài)State，先來分別看一個例子。

組件的狀態(tài) State

先來看效果：

組件 State 示例，效果圖

完整代碼如下：

// App.jsx class App extends React.Component {constructor () {super()this.state = {count: 0}}onIncrease = () => {this.setState({ count: this.state.count + 1 })}onDecrease = () => {this.setState({ count: this.state.count - 1 })}render() {return (<div><div>當前數(shù)值：{this.state.count}</div><button onClick={this.onIncrease}>點我-1</button><button onClick={this.onDecrease}>點我+1</button></div>);} }

解析：

constructor方法中，設置了一個 State 屬性 ?count?，初始值為 0；

聲明了兩個方法 ?onIncrease? 和 ?onDecrease?，方法里對 count 設置了 +-1 的操作；

render 函數(shù)里渲染了一行文字 + 兩個按鈕，這里有兩個注意點：

return里面的內(nèi)容是 jsx 模板，大括號內(nèi)的內(nèi)容是一個 js 變量或者表達式，React 會自動渲染。例如 ?{this.state.count}? 渲染時就會渲染成count的值

給 button 指定了屬性(Props) ?onClick?，即當 button 點擊時，會自動調(diào)用 指定的函數(shù)。

建議沒看到上面例子的同學，帶著上面的解析，重新嘗試能否看懂。

上面的例子中，?count? 就是 App組件 的一個 State

用來直接將 count 顯示在界面上；

當接收到點擊事件時，改變了 count 這個 State。

父組件傳遞的屬性 Props

從語義上理解：Props 是父組件傳遞給子組件的屬性，與 State 不同的是子組件不能修改，只有父組件才能修改。

先看看如何使用 Props：

// HelloMessage.jsx class HelloMessage extends React.Component {render() {return (<div><div>Hello {this.props.username}</div></div>);} }

上述例子，使用的示例、效果如下：

<HelloMessage username="秦書羽" />

Props 使用效果圖

解析：子組件在使用Props時，使用 ?this.props? 直接調(diào)用即可，父組件在使用子組件時，應將需要的數(shù)據(jù)傳給子組件。

數(shù)據(jù)驅動的理解

上面兩個例子中，界面都是根據(jù)數(shù)據(jù)來渲染，且隨著數(shù)據(jù)變化，自動更新，這就是數(shù)據(jù)驅動渲染。

再說下數(shù)據(jù)驅動的理解：

界面的渲染，由數(shù)據(jù)(State和Props)決定，數(shù)據(jù)變更驅動頁面更新；

人機交互(點擊、按鈕操作等)驅動數(shù)據(jù)變更，界面根據(jù)數(shù)據(jù)自動更新；

對于開發(fā)者，開發(fā)一個組件，需要分成兩部分：數(shù)據(jù) 和 視圖，再根據(jù)用戶行為，修改數(shù)據(jù)即可

從這個方面去理解，React 是一個 Model -> View 的一個框架。

“數(shù)據(jù)驅動”的理解圖

數(shù)據(jù)驅動模式帶來的收益

個人見解：

數(shù)據(jù)和視圖分層，邏輯解耦清晰，優(yōu)雅的多；

人機交互的行為太多、先點哪個按鈕、再點哪個按鈕，傳統(tǒng)開發(fā)方式需要判斷的東西太多，數(shù)據(jù)驅動的話，只需要根據(jù)當前的數(shù)據(jù)，修改對應的數(shù)據(jù)，大大簡化；

利于單元測試。

三、總結

在開發(fā)模式上，React 給我們帶來了 組件化和數(shù)據(jù)驅動。其內(nèi)部也基于此做了大量的性能優(yōu)化；

React 是一個基礎的 UI 庫，作者和社區(qū)提供了更多配套，如React-Router(路由)、Redux(全局狀態(tài)管理)，同學們可以在 React 的理解基礎上 向上擴展；

本文都是在講 React 的 組件化和數(shù)據(jù)驅動。但我認為不是因為有了 React 才有 組件化和數(shù)據(jù)驅動，而是先有 組件化和數(shù)據(jù)驅動 的想法，為了達到這樣的設計，最終實現(xiàn)了 React 。本文沒有涉及原理，有興趣的同學可以自行學習。

---

字節(jié)跳動杭州游戲中臺急招Web前端(實習、P5-P6（1-5 年） 都要)，新業(yè)務，發(fā)展好。歡迎簡歷 qinshuyu@bytedance.com，部門直推。職位JD（僅供參考）

感謝您的閱讀，歡迎評論區(qū)指正、交流。

總結

以上是生活随笔為你收集整理的react 组件封装原则_我理解的React：React 到底是什么？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。