![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
通过实战学习 react
敲代码的翠花
这个作者很懒,什么都没留下…
展开
-
react_0
创建一个名为 "client" 的新的 React 应用,并使用 TypeScript 作为主要的编程语言。在项目根目录下新建文件 .env.development,它可以定义开发环境下的环境变量。是一个由 Facebook 提供的脚手架工具,用于快速创建 React 应用。表示你希望使用 TypeScript 作为应用的主要编程语言。推荐安装 Prettier 代码格式化插件。所以,总的来说,这条命令的意思是:使用。工具创建一个新的 React 应用。是你要创建的应用的名称,原创 2023-10-25 10:33:22 · 64 阅读 · 0 评论 -
react_1
组件中使用了 jsx 语法,即在 js 中直接使用 html 标签或组件标签函数式组件必须返回标签片段在 index.js 引入组件将欢迎词作为属性传递给组件字符串值,可以直接使用双引号赋值其它类型的值,用{值}而组件修改为。原创 2023-10-25 11:35:02 · 42 阅读 · 0 评论 -
react_2
Effect 称之为副作用(没有贬义),函数组件的主要目的,是为了渲染生成 html 元素,除了这个主要功能以外,管理状态,fetch 数据 ... 等等之外的功能,都可以称之为副作用。问题还未结束,第二次 P5 调用时,updateStudent 还会执行,结果会导致 2s 后响应返回继续调用 setStudent,这会导致每隔 2s 调用一次 P5 函数(渲染一次)第二次,虽然 props 修改触发了函数重新执行,但既然函数重新执行,函数内的 student 又被赋值为。原创 2023-10-25 11:48:19 · 29 阅读 · 0 评论 -
react_3
Effect 称之为副作用(没有贬义),函数组件的主要目的,是为了渲染生成 html 元素,除了这个主要功能以外,管理状态,fetch 数据 ... 等等之外的功能,都可以称之为副作用。如果组件分散在多个文件中,HiddenContext 应该 export 导出,用到它的组件 import 导入。useXXX 打头的一系列方法,都是为副作用而生的,在 react 中把它们称为 Hooks。React 中因修改触发的组件重新渲染,都应当是自上而下的。useEffect 三种用法。用它改写 P5 案例。原创 2023-10-25 14:55:11 · 38 阅读 · 0 评论 -
react_4
发现确定和取消按钮是英文的,这是因为 antd 支持多种语言,而默认语言是英文。要想改为中文,建议修改最外层的组件 index.tsx。目前版本是 "antd": "^5.10.2"引入样式,在index.css 文件中加入。引入 antd 组件。原创 2023-10-25 15:11:51 · 47 阅读 · 0 评论 -
react_5
本例还是查询所有数据,分页是客户端 Table 组件自己实现的。本例需要服务端配合来实现分页,参见代码中新加的注释。其中 PageResp 类型定义为。原创 2023-10-25 15:54:15 · 71 阅读 · 0 评论 -
react_6
建议 axios 发请求是用 params 而不要自己拼字符串,因为自己拼串需要去掉值为 undefined 的属性。其中 StudentQueryForm 为。原创 2023-11-03 22:10:15 · 143 阅读 · 0 评论 -
react_7
【代码】react_7。原创 2023-11-03 22:16:07 · 60 阅读 · 0 评论 -
react_8
forceRender 是避免因为使用 useForm 后,表单套在 Modal 中会出现下面的警告。原创 2023-11-03 22:22:34 · 182 阅读 · 0 评论 -
react_9
form.resetFields() 会将表单重置为 initialValues 时的状态。initialValues 只会触发一次表单赋初值。原创 2023-11-03 22:27:25 · 57 阅读 · 0 评论 -
react_10
【代码】react_10。原创 2023-11-03 22:32:39 · 28 阅读 · 0 评论 -
react_11
需求,组件0 改变了数据,其它组件也想获得改变后的数据,如图所示这种多个组件之间要共享状态数据,useState 就不够用了,useContext 也不好用了能够和 react 配合使用的状态管理库有MobXRedux其中 Redux API非常难以使用,这里选择了更加符合人类习惯的 MobX,它虽然采用了面向对象的语法,但也能和函数式的代码很好地结合。原创 2023-11-03 22:50:45 · 289 阅读 · 0 评论 -
react_12
使用 store,所有使用 store 的组件,为了感知状态数据的变化,需要用 observer 包装,对应着图中 reactions。在异步操作里为状态属性赋值,需要放在 runInAction 里,否则会有警告错误。原创 2023-11-03 22:57:37 · 275 阅读 · 0 评论 -
react_13
children 来进行嵌套路由映射,嵌套路由在跳转后,并不是替换整个页面,而是用新页面替换父页面的 Outlet 部分。load 方法的作用是懒加载组件,更重要的是根据字符串找到真正的组件,这是动态路由所需要的。目前版本是 "react-router-dom": "^6.18.0"新建文件 src/router/MyRouter.tsx。//-dom代表给浏览器应用使用的。Navigate 的作用是重定向。index.tsx 修改为。A8Main 的代码。原创 2023-11-03 23:08:35 · 360 阅读 · 0 评论 -
react_14
动态路由应该是根据用户登录后,根据角色的不同,从后端服务获取,因为这些数据是变化的,所以用 mobx 来管理。动态路由,变化的部分,经常是主页内的嵌套路由,比如 Student、Teacher 这些。其中用 localStorage 进行了数据的持久化,避免刷新后丢失数据。在src\store\路径下新建RoutesStore.tsx。静态路由,固定的部分,如主页、404、login 这几个页面。原创 2023-11-03 23:12:09 · 595 阅读 · 0 评论 -
react_15
用 useNavigate() 返回的函数跳转的代码不能包含在函数式组件的主逻辑中,只能放在。写在副作用函数 useEffect 之中。原创 2023-11-03 23:27:05 · 365 阅读 · 0 评论 -
react_16
【代码】react_16。原创 2023-11-03 23:33:28 · 116 阅读 · 0 评论