React 笔记 jsx_代码007(未授权)

本文介绍: html 内置标签通过 i s 属性标记为自定义组件通过定义组件函数的参数来设定 props。

严格约定：Re a ct 组件必须以大写字母开头，而 HTML 标签则必须是小写字母。

JSX 是由 Re a ct 推广的 Ja vaScri p t 语法扩展。
用于表达组件的特殊语法的 js 函数

通过 () 包裹 d 多行 html 标签；通过 {} 插入 js 表达式值
注意: 属性=xxx 时，要去掉“”，否则无法识别{} 插值

style={{
  width: user.imageSize,
  height: user.imageSize
}}

事件 监听 `on`前缀

当子组件阻止事件传播后，可以通过 on事件Capture 来强制捕获事件
 捕获会被优先处理

得益于 jsx 语法，条件和循环都可以用原生 js来实现；
被循环的(列表)元素应该设置 key 属性，用于在其兄弟节点中唯一标识该元素。

useState

const [状态名, 更新状态方法名] = useState(0)

useRef
不会触发重新渲染

Ho ok `useXxxx`

const [状态名, 更新状态方法名] = useState(初始值)

类似 Vue provide/inject

useEffect(setup, dependencies?)

react 对表单元素做了特殊处理，使得绑定的prop后，需要绑定onChange等会改变prop值的事件
 对应 vue @update:propName
在这里插入图片描述

更新屏幕、启动动画、更改数据等，它们被称为 副作用。
它们是 “额外” 发生的事情，与渲染过程无关。副作用无需按照纯函数，如事件处理函数。
useEffect 方法在渲染结束后执行。(nextTi ck)

inputRef.current.xxx

`<StrictMode>`

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

<xxxContext.Provider value={var}&gt;

下层通过 useContext(context对象) 获取上下文
 https://react.docs china.org/learn

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

render(reactNode, domNode, callback?)

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

<StrictMode>
  <Provider store={store}>
    <APP />
  </Provider >
</StrictMode>

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

<StrictMode>
  <BrowserRouter>
    <APP />
  </BrowserRouter>
</StrictMode>

const routes = [
  {
    path: '*',
    element: <NotFound />,
  }
]

useRoutes 身材组件注册

<Routes>
   <Route path="/" element={<NotFound />} />
 </Routes>

useLoaderData 加载路由变量

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

const { loading, run, runAsync } = useRequest(service, {
  manual: true
})

显示所有内容

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

Re a ct

JSX

classNa m e htmlFo r 自定义 组件 特殊 属性

style 对象 方式 指定

事件 监听 `on`前缀

事件 传播

事件 捕获

条件 循环 生成

响应式

Ho ok `useXxxx`

useState 响应式

useCon text

useEff ect

useRef

自定义 hook

通信

prop

双向 数据流

组件

ref DOM

`<StrictMode>`

createContext

react–dom

Redu x

React Redu x

react–router–dom

react–scripts

umi–requset 类似 axios

@ahooks js/use-request

config 配置项

发表回复取消回复

React

JSX

className htmlFor 自定义组件特殊属性

响应式

Hook useXxxx

useState 响应式

useContext

useEffect

useRef

组件

ref DOM

<StrictMode&gt;

createContext

react–dom

Redux

React Redux

react–router–dom

react–scripts

umi–requset 类似 axios

@ahooksjs/use-request

config 配置项

相关文章

发表回复 取消回复

Re a ct

classNa m e htmlFo r 自定义组件特殊属性

Ho ok `useXxxx`

useCon text

useEff ect

`<StrictMode>`

Redu x

React Redu x

@ahooks js/use-request

发表回复取消回复