react开发基础知识

react 有哪些优势

组件化开发 不错性能

丰富生态 跨平台

react 编码技巧 1

保持语义化

生成 react 目录命令

npx create-react-app react-basic

JSX 是什么？

JSX => JS 扩展语法

浏览器不能直接解析 JSX 语法，需要通过 babel 转译

babeljs.io 解析工具去解析

div this is div => BABEl => js _jsx("div",{children:"this is div"})

babel 官网

react 编码技巧 2

1. 渲染 key 的作用 ，提升内部的更新性能

2. 只是单独一个组件 首字母大写

react 理念性术语

数据驱动试图 useState

状态不可变 值变化了 但是视图不会修改，是能通过 setXxx 函数改变

react 编码技巧 3

1. 数据变化可控
2. 结构复杂时，用小括号括起来

react useEffect 的理念

1. 没有依赖项 组件初始渲染+组件更新渲染

2. 空数组 只会在初始渲染时执行一次

3. 特定依赖 初始渲染+特定依赖项变化时

react useEffect 清除副作用

执行时机 组件卸载时自动清除副作用

react useHook 使用的注意事项

• use hook 函数只能在组件内
• 不能在组件外，也不能嵌套在 if for => 会有错误提示

react 一些理念

”智能组件“ 负责交互，”UI 组件“负责渲染，也叫路由组件

react 常用 API

useState 定义数据，赋值数据

useRef 获取 DOM

useEffect 副作用，发送接口请求

useHook 自定 hook 封装通用代码

参考链接

1. babel
2. lodashjs
3. uuid
4. dayJs
5. json-server
6. axios