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

相关推荐
腾讯TNTWeb前端团队5 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰9 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪9 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪9 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy10 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom10 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom10 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom10 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom11 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom11 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试