React核心基础

头发很多的前端
112 阅读3分钟

1、React脚手架开发

命令

npx create-react-app my-app
cd my-app
npm start

安装后目录结构留： image.png

启动：npm start

安装react插件 image.png

2、组件

新建一个组件文件夹，用默认暴露，在app.js中直接引入，组件名首字母大写

rcc自动生成类组件，类组件可以使用内部数据，在constructor里创建 image.png

rfc自动生成函数组件，没有自带可使用的state内部数据 定义的函数首字母要大写 image.png

取state的值解构更快

image.png

只要setState,render重新渲染 image.png

3、组件分离

组件建成文件夹，包含html，js，css 定义一个函数组件 image.png 引用组件+传参 image.png

4、第三方包

nrm test
nrm use taobao (选最快的)
nrm test (带星号的表示选用的)

5、组件通讯

父传子

react任意数据类型都可传，函数也可 image.png

image.png

父组件 image.png 子组件 image.png

子传父

父组件 image.png 子组件 image.png

兄弟组件传参

image.png

父组件 image.png 兄弟A,带参用箭头函数 image.png

跨组件通讯

image.png

在utils.js文件里创建一次context对象即可 image.png

6、Refs

image.png

利用类组件创建refs--创建refs先super实例化 利用refs操作dom image.png

利用refs操作组件实例 image.png

7、React生命周期

常用

image.png

image.png image.png

不常用

image.png 利用类组件+生命周期创建电子时钟示例 image.png

图像1.png image.png

8、Hooks

介绍

均以use开头 image.png

image.png

useState hook

实现函数组件里有可操作的内部数据，setCount是方法，用驼峰命名，点击时调用，故用箭头函数 image.png 示例 image.png image.png 更新对象值，用浅拷贝展开改 image.png

useEffect hook

image.png 不同的语法类似对应不同的生命周期 image.png rfc--电子时钟 image.png 优化 image.png 关闭时钟 image.png

rfc组件更新，代码执行流程，只要刷新，整个组件再次执行，所以return之前只写const调用的，其他的log等每次点击都会执行，导致性能低

image.png

useContext hook

image.png image.png

useRef hook

image.png image.png

useMemo hook

官方解释 image.png

示例理解，useMemo一般不用，性能优化时使用，写后面的依赖值，刷新依赖值的改变，而不是随组件一起刷新

image.png

useCallback hook
预备知识--高阶组件

image.png image.png 用法-性能优化--memo包裹子组件 只要更新条件不变，子组件就不随父组件刷新而刷新 image.png props也可解构 image.png

useCallback

image.png 可实现性能优化，由于子组件接收函数参数时，由于函数是复杂数据类型，也会随父组件更新，利用useCallback可以缓存函数，函数参数没变，则子组件也不会刷新 image.png

自定义hooks

image.png 自定义hooks，封装起来便于复用 image.png 引用自定义hooks image.png

rfc+发fetch请求 渲染商品列表
请求方法有ajax,axios库(需要安装)，fetch->promise(不用安装)

image.png 具体实现 image.png

网络hooks封装

image.png 引用 image.png

9、路由

前面知识总结 image.png

Vue路由

image.png

React路由
 安装  npm install react-router-dom

image.png image.png

NavLink和Link

image.png

重定向路由

image.png

嵌套路由

image.png image.png image.png

全局404路由

image.png

编程式导航与传参

跳转路由且需要传参时使用 image.png image.png image.png

10、后台管理系统案例

各页面分别建立文件夹便于管理组件

image.png

不同文件样式调用时同名的会相互影响，react没有scoped，需做如下处理，(react兼容scss，需安装 npm i sass -D) image.png image.png

登录+网络请求引入

image.png

image.png

首页

image.png

菜单列表跳转

用嵌套路由 image.png 内容显示 image.png

11、移动端Tabbar案例

利用高阶组件实现Tabbar image.png 定义高阶组件Tabbar image.png image.png image.png 引用Tabbar image.png

avatar
文章
阅读
粉丝