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

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

最重要的寫在前面

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

組件化

數據驅動

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

一、組件化

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

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

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

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

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

子組件接受父組件的參數(Props) 、 以及維護組件內部的狀態(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是兩個常用的生命周期函數，傳送門：更多生命周期。

render 函數在每次渲染時調用，返回的內容就是組件最終的界面，示例中return 了一個Hello World 的 div。

子組件調用示例

再寫一個 按鈕組件 ?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 調用子組件其實就是把子組件當做一個標簽，跟 div 這些標簽一樣。

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

Wrap組件效果圖

組件化小結

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

二、數據驅動

現在來講我的另一個理解——?數據驅動?，那么組件有哪些數據呢？

組件有兩種數據：父組件傳遞的參數 Props和組件內部的狀態State，先來分別看一個例子。

組件的狀態 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>當前數值：{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 函數里渲染了一行文字 + 兩個按鈕，這里有兩個注意點：

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

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

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

上面的例子中，?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? 直接調用即可，父組件在使用子組件時，應將需要的數據傳給子組件。

數據驅動的理解

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

再說下數據驅動的理解：

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

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

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

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

“數據驅動”的理解圖

數據驅動模式帶來的收益

個人見解：

數據和視圖分層，邏輯解耦清晰，優雅的多；

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

利于單元測試。

三、總結

在開發模式上，React 給我們帶來了 組件化和數據驅動。其內部也基于此做了大量的性能優化；

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

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

---

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。