React初學者，你需要知道這些

react 不是 mvc 框架，也不同於其他任何框架。它只是乙個用來渲染你檢視的庫。如果你來自 mvc 的世界，你需要意識到 react 只是』v』，且是部分等於。你需要在其他地方找到你的『m』和『c』。不然你終將會在令人生厭的 react **前止步。

這點是顯而易見的，但也值得討論。每乙個優秀的開發者都知道小的類或模組更容易理解，測試和維護。對於 react 元件來說也是一樣。在開始使用 react 時會有乙個疑問，那就是我的元件到底該要多小？顯然，確定的尺寸取決於很多因素（包括你和你的團隊成員的偏好），但通常我的建議是讓你的元件比你認為的還要小很多。比如下面這個用於展示我最近部落格推送的元件：

const
latestpostscomponent
= props =>
(latest posts<
/h1>
<
/div>
post=
/>)}
<
/div>
<
/section>
);

這個元件本身是乙個，僅有2個在裡面。第乙個是標題，第二個映**一些資料，為每乙個元素渲染了。我認為這是乙個元件適合的尺寸。

之前有定義 react 元件有兩種選擇，第一種是react.createclass():

const mycomponent = react.
createclass(/
>;}
});

另一種是 es6 的類：

class
mycomponent
extends
react.component
/>;}
}

react 0.14 引入了尋得定義元件的語法：

const
mycomponent
= props =>
(/>
);

這是至今我最喜歡的定義 react 元件的方法。除了更加簡潔的語法，這種方法對元件需要被分離時很有幫助。讓我們看乙個例子，假設我們沒有進行元件分離：

class
latestpostscomponent
extends
react.component
<
/div>
<
/section>);
}renderpostpreviews()
renderpostpreview
(post)`}
>
<
/a>
<
/h3>
<
/em>
<
/time>
<
/span>
>read more...
<
/a>
<
/div>
<
/article>);
}}

這種寫法並不是很糟糕。我們已經從render()方法中抽取了大量方法，並保證每一塊**都盡可能小並很好地命名。我們已經將renderpostpreviews()方法封裝地足夠好了。讓我們使用函式語法重寫這段**：

const
latestpostscomponent
= props =>
<
/div>
<
/section>);
};const
renderpostpreviews
= posts =>
(  posts.
map(post =>
this
.renderpostpreview
(post)))
;const
renderpostpreview
= post =>
(>
<
/a>
<
/h3>
<
/em>
<
/time>
<
/span>
>read more...
<
/a>
<
/div>
<
/article>
);

兩段段**幾乎一致，只是後面的沒有了類的宣告。然而對我來說這是很大的區別。在基於類的例子中，我會看到

class latestpostscomponent 
>
<
/li>))
}<
/ol>);
listofnumbers.proptypes =

;它有一下幾點好處：

react 和 redux dev tools 都是非常棒的工具。react dev tool 是你能夠查閱已經渲染的 react 元素樹，這對於檢視瀏覽器中的檢視很有幫助。redux dev tool 更加出色，使你能檢視發生的每乙個動作，以及動作造成的狀態改變，甚至給你能夠回溯的能力。

你也可以設定熱模組來替代 webpack,使你的頁面在你的**改變時就更新-不需要瀏覽器主動重新整理。這使得反饋迴圈更加地高效。

React初學者，你需要知道這些

關於棧，你需要知道這些

上手UDP，你只需要知道這些

接軟體開發專案，你需要知道這些！

React初學者，你需要知道這些

關於棧，你需要知道這些

上手UDP，你只需要知道這些

接軟體開發專案，你需要知道這些！

相關推薦