React 笔记 jsx

严格约定:React 组件必须以大写字母开头,而 HTML 标签则必须是小写字母。

React

JSX

JSX 是由 React 推广的 JavaScript 语法扩展。

用于表达组件的 特殊语法的 js 函数

  • 要求标签必须闭合;
  • 返回的组件必须包裹在一个父标签内;
    <>...</> 类似 vue 的 <template>

通过 () 包裹 d多行 html 标签;通过 {} 插入 js 表达式值

注意: 属性=xxx 时,要去掉"",否则无法识别{} 插值

html-to-jsx

className htmlFor 自定义组件特殊属性

html 内置标签通过 is 属性 标记为 自定义组件

style 对象方式 指定

html 复制代码
style={{
  width: user.imageSize,
  height: user.imageSize
}}

事件监听 on前缀

事件传播

在 React 中所有事件都会传播,除了 onScroll,它仅适用于你附加到的 JSX 标签。

事件捕获

当子组件阻止事件传播后,可以通过 on事件Capture 来强制捕获事件

捕获会被优先处理

条件循环生成

得益于 jsx 语法,条件和循环都可以用原生js来实现;

被循环的(列表)元素 应该设置 key 属性,用于在其兄弟节点中唯一标识该元素。

响应式

useState

js 复制代码
const [状态名, 更新状态方法名] = useState(0)

目前看来响应式只能在组件总使用

useRef

不会触发重新渲染

Hook useXxxx

hook 要求必须在组件中使用

只能在组件或自定义 Hook 的最顶层调用

内置的hook

useState 响应式

js 复制代码
const [状态名, 更新状态方法名] = useState(初始值)

useContext

类似 Vue provide/inject

useEffect

将一个组件与外部系统同步 类似vue的watch

useEffect(setup, dependencies?)

useRef

自定义hook

通信

prop

通过定义 组件函数的参数 来设定 props

双向数据流

react 对表单元素做了特殊处理,使得绑定的prop后,需要绑定onChange等会改变prop值的事件

对应vue @update:propName

组件

应严格按照 纯函数 编写

不要在创建时,修改外部的变量

更新屏幕、启动动画、更改数据等,它们被称为 副作用

它们是 "额外" 发生的事情,与渲染过程无关。副作用无需按照纯函数,如事件处理函数。
useEffect 方法在渲染结束后执行。(nextTick)

ref DOM

inputRef.current.xxx

<StrictMode>

包裹 <APP /> 用来 启用额外的开发行为和警告,使得在开发过程中能够及早发现组件中的常见错误。

createContext

创建一个 context 对象.Provider 传给上下文动态内容

html 复制代码
<xxxContext.Provider value={var}>

下层通过 useContext(context对象) 获取上下文

https://react.docschina.org/learn


react-dom

React 只包含了 Web 和 Mobile 通用的核心部分,负责 Dom 操作的分到 ReactDOM 中,负责 Mobile 的包含在 ReactNative 中

小驼峰编写propName

虚拟dom:
render (React18后 将被 createRoot 替代) 会将一段 JSX("React 节点")渲染到浏览器 DOM 容器节点中。但会先清空DOM 中的内容。

js 复制代码
render(reactNode, domNode, callback?)

createPortal 设定插入位置


Redux

全局状态管理
createStore(function reducer(state, action){})
combineReducers 合并多个 reducer

React Redux

js 复制代码
<StrictMode>
  <Provider store={store}>
    <APP />
  </Provider >
</StrictMode>

<Provider> 组件使得 Redux store 能够在应用的其他地方使用

React Redux 在内部实现了许多性能优化,以便你编写的组件仅在实际需要时重新渲染。

  1. 创建一个 Redux store
  2. 订阅更新
  3. 订阅回调内部:
    i. 获取当前的 store state
    ii. 提取这部分 UI 需要的数据
    iii. 使用数据更新 UI
  4. 如有必要,用初始的 state 去渲染 UI
  5. 通过 dispatching Redux actions 去响应 UI 层的交互

connect方法,用于从 UI 组件生成容器组件。

react-router-dom

官方向导

js 复制代码
<StrictMode>
  <BrowserRouter>
    <APP />
  </BrowserRouter>
</StrictMode>
js 复制代码
const routes = [
  {
    path: '*',
    element: <NotFound />,
  }
]

useRoutes 身材组件注册

一般编写

js 复制代码
<Routes>
   <Route path="/" element={<NotFound />} />
 </Routes>

useLoaderData 加载路由变量

react-scripts

包括创建 React 应用程序使用的脚本和配置。

类似 Vue-Cli

umi-requset 类似 axios


https://react.docschina.org/learn/add-react-to-an-existing-project

https://react.docschina.org/learn/start-a-new-react-project

https://reactnative.dev/


@ahooksjs/use-request

useRequest 是一个强大的异步数据管理的 Hooks,React 项目中的网络请求场景使用 useRequest 就够了。

https://ahooks.js.org/zh-CN/hooks/use-request/basic

js 复制代码
const { data, error, loading } = useRequest(()=>{
  // 在组件初始化时,会自动执行该异步函数
  ···
}, config)

返回内容:

  • data
  • error
  • loading
  • run, runAsync // 仅在手动时有效
  • refresh, refreshAsync 重复上一次请求(参数一致)
  • mutate(value) 立即更新data
  • cancel 忽略当前 promise 返回的数据和错误
  • params 当前 service 的参数数组

config 配置项

manual 手动执行

js 复制代码
const { loading, run, runAsync } = useRequest(service, {
  manual: true
})

defaultParams 默认参数组

生命周期 钩子:

  • onBefore:请求之前触发
  • onSuccess:请求成功触发
  • onError:请求失败触发
  • onFinally:请求完成触发

refreshDeps: [响应式状态, ···] 当它的值变化后,会重新触发请求

formatResult

相关推荐
懒大王爱吃狼37 分钟前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
小牛itbull2 小时前
ReactPress:重塑内容管理的未来
react.js·github·reactpress
努力变厉害的小超超2 小时前
ArkTS中的组件基础、状态管理、样式处理、class语法以及界面渲染
笔记·鸿蒙
逐·風5 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫5 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦6 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
aloha_7896 小时前
从零记录搭建一个干净的mybatis环境
java·笔记·spring·spring cloud·maven·mybatis·springboot
GIS程序媛—椰子6 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山7 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享7 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis