React CheatSheet

如果你是一個(gè)react的新手，那么你不得不記住很多語(yǔ)法還有一些react的特殊用法，你需要了解很多react的基礎(chǔ)知識(shí)，比如jsx語(yǔ)法，比如生命周期，比如hook的用法，比如組件的值傳遞等等，而通過(guò)react cheatsheet這個(gè)網(wǎng)站，你就可以方便地查看它們。

React Dev Tools

在開(kāi)發(fā)原生js的時(shí)候，我們經(jīng)常使用瀏覽器自帶的開(kāi)發(fā)者工具，它足以幫助我們查看和調(diào)試js中變量的各種信息，但是對(duì)于react框架來(lái)說(shuō)，因?yàn)樗遣捎脛?dòng)態(tài)渲染生成的代碼結(jié)構(gòu)，因此，我們需要一種可以分析react代碼結(jié)構(gòu)和變量狀態(tài)的工具，而react dev tools 就是這樣的工具，通過(guò)安裝這個(gè)瀏覽器擴(kuò)展，我們就可以輕松地分析react框架中各個(gè)變量狀態(tài)信息，還可以分析react路由等信息，總之，有了它對(duì)于我們調(diào)試我們的react應(yīng)用將會(huì)起到巨大的作用，幾乎是開(kāi)發(fā)調(diào)試react的必備應(yīng)用。

React Sight

這也是一個(gè)瀏覽器擴(kuò)展，它需要你在安裝上面的react dev tools擴(kuò)展之后才能使用。安裝它之后，你能夠看到一個(gè)可視化的界面，通過(guò)它你可以讓您直觀地看到應(yīng)用程序的結(jié)構(gòu)。

Bundle Analyzer

當(dāng)我們對(duì)我們的應(yīng)用進(jìn)行打包的時(shí)候們，我們總是希望我們的應(yīng)用越小越好，bundel analyzer能夠分析出各個(gè)插件，各個(gè)模塊占用空間的大小，方便我們對(duì)它進(jìn)行優(yōu)化。

useHooks

Hooks是 React 中的新增功能，可讓我們?cè)诓痪帉戭惖那闆r下使用狀態(tài)和其他 React 的功能。對(duì)于鉤子如何使用很多人還不是很理解，不過(guò)這沒(méi)關(guān)系，有人已經(jīng)總結(jié)了很多關(guān)于鉤子的使用方式，并且提供了詳細(xì)的案例幫助我們理解，你只需要訪問(wèn)usehooks這個(gè)網(wǎng)站就可以查看并使用它們。

Storybook

Storybook 是一個(gè)開(kāi)源工具，用于獨(dú)立構(gòu)建 UI 組件和頁(yè)面。它簡(jiǎn)化了 UI 開(kāi)發(fā)、測(cè)試和文檔編制。Storybook 是一個(gè)強(qiáng)大的前端工作室環(huán)境工具，它允許團(tuán)隊(duì)設(shè)計(jì)、構(gòu)建和組織 UI 組件而不會(huì)被業(yè)務(wù)邏輯和管道絆倒。編寫一次story，然后重用它們來(lái)支持自動(dòng)化測(cè)試。Storybook 讓我們能夠輕松地將技術(shù)文檔包含在我們的設(shè)計(jì)系統(tǒng)中，從而使開(kāi)發(fā)組件變得更加簡(jiǎn)化。

Formik

表單處理是網(wǎng)頁(yè)開(kāi)發(fā)經(jīng)常會(huì)遇到的問(wèn)題，而Formik是一個(gè)可以在React中構(gòu)建表單的組件。它是一個(gè)小型庫(kù)，可以讓表單的各個(gè)狀態(tài)都能被保存，對(duì)于錯(cuò)誤的處理和表單的驗(yàn)證，它都提供了非常友好的處理方式，可以說(shuō)它就是專門為表單處理而誕生的。

ESLINT

ESLint是一個(gè)靜態(tài)分析工具，它可以非?？焖俚锥ㄎ话l(fā)現(xiàn)項(xiàng)目代碼中的問(wèn)題，并且可以自動(dòng)修復(fù)大部分問(wèn)題。它采用語(yǔ)法感知技術(shù)，不會(huì)在修改的時(shí)候引入其它的錯(cuò)誤。

ESLint內(nèi)置了許多預(yù)處理規(guī)則，可以讓你在幾乎零配置的情況下處理大部分問(wèn)題，當(dāng)然，你也可以自定義規(guī)則，讓ESLint按照你的方式處理代碼。

React Hot Loader

React Hot Loader 是一個(gè)熱重載插件，它允許 React 組件在不丟失狀態(tài)的情況下實(shí)時(shí)重新加載。

它與支持熱模塊替換 (HMR) 和 Babel 插件的 Webpack 和其他打包器一起使用。通過(guò)使用它，可以讓你的開(kāi)發(fā)效率得到大大提升。

總結(jié)

react是一個(gè)非常強(qiáng)大的UI框架，無(wú)論是它的聲明式語(yǔ)法，還是組件化的封裝，都讓它變得越來(lái)越受歡迎，一次學(xué)習(xí)，多端運(yùn)行更是讓你可以體會(huì)到它的強(qiáng)大，多學(xué)習(xí)一門技能總是沒(méi)有錯(cuò)誤的，特別是像react這種被眾多大廠認(rèn)可的框架。