React基础

40 阅读1分钟

1、 搭建项目

npx create-react-app react-basic

2、 jsx

1723625435441.png

1723625976171.png

1723626374472.png

1723626679848.png

1723627177480.png

3、组件

1723627556524.png

4、useState

1723627807780.png

1723628062069.png

1723628470989.png

5、 样式控制

1723628592363.png

1723629096416.png

6、 classnames

1723689485096.png

7、 受控表单绑定

1723690880268.png

8、 获取DOM

1723691339820.png

1723691611886.png

1723693238037.png

9、 处理时间和id

1723692735507.png 1723692667450.png

10、 组件通信

父传子

1723693672508.png

1723693948243.png

1723694079905.png

1723694934351.png

子传父

1723703264099.png

1723704071740.png

兄弟组件通信

1723704600024.png

跨层组件

1723706052739.png

1723706926966.png

1723706706777.png

11、 useEffect

1723707231839.png

1723708746591.png

1723708678886.png

1723709789323.png

清除副作用

1723710270793.png

1723710496282.png

12、 自定义Hook函数

1723710675986.png

1723711054025.png

1723713675305.png

13、 json-server

1723714645076.png

14、 组件封装

1723774201164.png 1723774172370.png

1723774244121.png 1723774105175.png

15、 Redux

1723774378335.png

1723776709104.png

1723774916168.png

1723776607040.png

1723776659589.png

16、 redux 与 react

1723776847061.png

1723776981373.png

1723777208339.png

1723777590287.png

1723777772146.png

1723778056766.png

1723778160858.png

1723778271886.png

1723778857420.png

1723779007172.png

1723779813974.png

1723779950862.png

1723780040969.png

action传参

1723780291702.png

1723780420944.png

异步状态操作

1723780702531.png

1723781116586.png 1723781091607.png

1723788600806.png

调试

1723788950679.png

17、 ReactRouter

1723789543855.png

1723790027294.png

抽象路由模块

1723791991377.png

1723792030157.png

声明式导航

1723793646339.png

1723794085969.png

编程式导航

1723794013259.png

1723794377930.png

路由导航传参

1723796108045.png

1723795871515.png

1723796141276.png

1723795971429.png

1723796007406.png

嵌套路由哦诶之

1723796421723.png

1723796898324.png

1723796929990.png

默认二级路由

1723797203193.png

1723797247003.png

404路由配置

1723797380226.png

两种路由模式

1723797618787.png

19、 useReducer

1724054990007.png

1724055228831.png

1724057217714.png

1724057757577.png

20、 useMemo

1724057987498.png

1724058046442.png

1724058465178.png

React.memo

1724058595546.png

1724058912187.png

1724059022406.png

1724059415747.png

1724059613923.png

21、 useCallback

1724059744521.png

22、forwardRef

1724137808979.png

1724137985019.png

1724138250655.png

23、useImperativeHandle

1724138388674.png

1724138488221.png

1724138735655.png

24、 class类组件

1724210133588.png

1724210734270.png

1724211693729.png

25、 zustand:极简的状态管理工具

1724212248515.png

1724212782958.png

1724224462980.png

1724225414269.png

1724225542964.png