xjx0121的博客

1.定义独立的countes模块和list模块2.在index.js导入 拆分的模块3.使用React的 useContext机制导出统一的useStore方法 代码示例：listStore.js index.jsApp.js

1.定义一个数据2.定义get属性，编写一个计算公式3.在makeAutoObservable方法中进行标记代码示例：countes.js渲染数据App.js

1.创建react项目，初始化2.安装mobx和mobx-react-lite1.定义数据状态2.数据响应式处理3.定义一个函数4.实例化并将实例导出1.导入countStore实例2.使用实例中的数据3.修改实例中的数据4.让试图响应数据变化...

path路径使用' * '号,表示匹配不到路径时使用该路径代码示例： App.js NotFound.js

在Route下面包含二级路由Article.js配置引入Outlet

场景：有些时候不光需要跳转路由还需要传递参数两种方式： App.js #路由配置 Login.js #跳转到detail页面并进行传参 Detail.js #取参2.params传参 App.js #路由配置Login.js #跳转到detail页面并进行传参Detail.js #取参......

作用：通过js编程的方式进行路由页面跳转语法说明： 1.导入useNavigate 2.执行useNavigate得到一个跳转函数 3.调用跳转函数传入目标路径注意：如果在跳转时不想加历史记录，可以添加额外的参数replace为true例如：登录页跳转到关于页login.jsApp.js......

1.安装react-router-dom2.页面引入模块代码实例

使用步骤：导入 ，使用 创建Context对象在顶层组件通过 提供数据在底层组件通过函数获取数据代码实例： 1.顶层组件2.底层组件SonA 3.底层组件SonB 完整代码实例运行结果：

使用步骤：首先导入useRef，然后执行useRef函数并传入null，内部有一个current属性存放拿到的dom对象，之后通过ref绑定要获取的元素或者组件代码实例：运行结果：

在useEffect中请求接口，在该方法中封装同步操作相当于类组件中的钩子函数useEffect的执行时机在其他文章有介绍，地址：优快云https://mp.youkuaiyun.com/mp_blog/creation/editor/125008439

useEffect的作用：为react函数组件提供副作用处理1.不添加依赖项useEffect组件初始化会执行一次，然后每次组件更新都会调用一次import { useEffect, useState } from 'react'function App () { const [num, setNum] = useState(0) //默认状态，不添加依赖项 useEffect(()=>{ console.log(num+'副作用执行') }) ret

useState下状态的读取和修改1.首先导入useState函数2.调用useState函数并传入初始值代码示例：import { useState } from 'react'function App() { //参数1，参数2名字可以自定义，但是顺序不能改变，0为传入的初始值 const [num, setNum] = useState(0) return ( <button onClick={() => { setCount(num +

钩子 函数 触发时机 constructor 创建组件时，最先执行，初始化的时候只执行一次 render 每次组件渲染都会触发（注意： 不能在里面调用setState() 会陷入死循环） componentDidMount 组件挂载（完成DOM渲染）后执行，初始化的时候执行一次 componentDidUpdate 组件更新后（DOM渲染完毕） componentWillUnmount 组件卸载（从页面中消失） 注意：只有类组件才有生命周期 组

1.函数组件的校验-默认值//第二种方法直接在函数解构中赋值 （推荐使用）function SonA ({ page=10 }) { return ( <> <p>{page}</p> </> )}//第一种方法使用defaultProps （不推荐）//SonA.defaultProps = {// page: 10//}class App extends Component { render

propstypes校验的四种常见结构 常见类型：array、bool、func、number、object、string、symbol React元素类型：element 必填项：isRequired 特定的结构对象：shape({}) 实现步骤 安装属性校验包：yarn add prop-types 导入import PropTypes from "prop-types" 使用 组件名.propTypes = {添加校验规则}..

children属性是表示该组件的子节点，只要组件内部有子节点，props中就有该属性children可以是什么 普通文本 普通标签元素 函数 JSX 代码实例1.普通文本function SonA(props){ return( <> <p>{props.children}</p> </> )}class Ap..

兄弟组件之间的通信

react父子组件传值方法

创建Context对象 导出 Provider 和 Consumer对象//解构createContext()const { Provider, Consumer } = createContext()使用Provider包裹根组件提供所需要的数据<Provider value={this.state.message}> {/* 这里放根组件 */}</Provider>需要用到数据的组件使用Consumer包裹获取数据<Consumer > {value => /* v