包含reacthooks閉包陷阱的詞條

useState和useEffect

1、使用useState可以聲明多個(gè)state變量 useEffect （副作用函數(shù)）是一個(gè) Effect Hook，給函數(shù)組件增加了操作副作用(在 React 組件中進(jìn)行數(shù)據(jù)獲取、訂閱或者手動(dòng)修改 DOM等)的能力。

2、函數(shù)useEffect，接收一個(gè)函數(shù)作為參數(shù)，接收的函數(shù)就是需要進(jìn)行副作用操作的函數(shù)。

3、usestate同步更新的三種方法：用useEffect中監(jiān)聽state變化。當(dāng)useEffect 監(jiān)聽到 state 變化時(shí)，再去執(zhí)行下一步操作。用回調(diào)函數(shù)傳參 方法獲取最新的值，同時(shí)用 promise 變成同步方法 。

4、useEffect 中要謹(jǐn)慎使用 useState ，因?yàn)樗鼤?huì)觸發(fā)組件渲染后，再次調(diào)用 useEffect，形成一個(gè)死循環(huán)。正確方式：用條件語句包裹 useState 方法，定義了退出條件，避開死循環(huán)。

5、useEffect的執(zhí)行機(jī)制，是比較兩次依賴項(xiàng)是否相同，不同則執(zhí)行相關(guān)effect。

react自定義組件中使用ref

自定義組件：使用：先使用 React.forwardRef；再使用 connect 包一層會(huì)使 ref 屬性漏掉，導(dǎo)致 內(nèi)部實(shí)例無法傳到外部；正確的操作方式要調(diào)整高階組件的順序，先用connect包裹，然后再用React.forwardRef包裹。

Refs是使用屬性創(chuàng)建的，React.createRef()并通過ref屬性附加到React元素。在構(gòu)造組件時(shí)，通常將Refs分配給實(shí)例屬性，以便可以在整個(gè)組件中引用它們。

React.createRef() 和 ref的配合使用 用例：2：ref回調(diào)（個(gè)人最愛的一種方式）這種低版本的React也是支持的，它不同于createRef()，它接受一個(gè)函數(shù)，以dom元素或者React組件實(shí)例作為參數(shù)，以使它們能在其他地方被存儲(chǔ)和訪問。

Reactumi+小筆記

1、umi中使用sass只需安裝 @umijs/plugin-sass 安裝完后無需配置，umi會(huì)自己識(shí)別。

2、現(xiàn)在 yarn start 或者 yarn build 就會(huì)根據(jù)環(huán)境配置來處理。還有一些細(xì)節(jié)的調(diào)整，會(huì)盡力將這個(gè)框架更加完善的。

3、這個(gè)是ts的問題，我在stackoverflow上提的問題如鏈接： 我的提問 ，本質(zhì)上是使用組件范型的方式解決問題。這一點(diǎn)在 Hello React and TypeScript 中也提到了。

4、首先得選擇一個(gè)腳手架搭建一個(gè)React工程，React有很多腳手架，為什么選擇UmiJS這個(gè)腳手架，不為什么，這個(gè)腳手架和Vue Cli比較類似，至少路由配置和Vue Router很類似。

5、react打包后文件直接修改生效步驟：使用eject命令暴露配置。修改暴露出的配置文件config/path.js，將appBuild修改為需要輸出的位置。使用npminstall命令安裝依賴，然后執(zhí)行npmrunbuild打包。

6、建議用UmiJS來構(gòu)建項(xiàng)目，而不是用create-react-app，UmiJS幾乎已經(jīng)把需要用的配置、插件都已處理集成好了，可以省很多事。如果用create-react-app則基本是從0開始，所有配置都需要自己去處理，難度比較大。

React作為時(shí)下最熱的前端框架,各位有什么經(jīng)驗(yàn)分享下嗎

Amaze UI，基于foundation前端框架，更懂中文的開源前端框架，中文兼容性更強(qiáng)！ 其實(shí)還有更火的、Facebook的React！ Goggle的Angular。當(dāng)然還有未來的Polymer 無論他們?yōu)楹稳ゲ粎捚錈┑娜ラ_發(fā)一款又一款的前端框架。

React都是屬于目前比較主流的前端框架，但是我們通常會(huì)選擇項(xiàng)目比較適合的框架。React優(yōu)點(diǎn)：聲明式設(shè)計(jì) React采用聲明范式，可以輕松描述應(yīng)用。高效 React通過對(duì)DOM的模擬，最大限度地減少與DOM的交互。

總的來說，React、Vue和Angular都是非常優(yōu)秀的前端框架，每個(gè)框架都有其獨(dú)特的優(yōu)勢和適用場景。開發(fā)者可以根據(jù)自己的需求和技能水平選擇適合自己的框架。

React是單向數(shù)據(jù)流，代碼寫起來會(huì)較雙向數(shù)據(jù)流的多一些，但是同樣的排查問題時(shí)思路清晰很多。Vue 號(hào)稱是最簡單，最容易上手的框架，同時(shí)也是行內(nèi)的大趨勢，還可以用來開發(fā)最火的小程序。

Bootstrap Bootstrap是最流行的前端開發(fā)框架，可以讓不是前端工程師也能開發(fā)出優(yōu)美的頁面，更加快捷、方便的開發(fā)web頁面和移動(dòng)端應(yīng)用。也能開發(fā)響應(yīng)式web頁面，上手也非常快。

時(shí)下比較流行的前端開發(fā)技術(shù)--Angular，React和Vue。他們各有千秋，我們2016年React鞏固了它作為前端框架之王的地位，這一年中可以看到它在Web端和移動(dòng)端的快速成長，同時(shí)穩(wěn)穩(wěn)領(lǐng)先于它的主要競爭對(duì)手Angular。