React.js
CSDN_GMC
这个作者很懒,什么都没留下…
展开
-
React-5.3 Redux -- 使用react-redux
Redux的使用一. connect1.安装2.文件代码示例1). store文件夹:创建空仓库index.js -- 总控仓库reducer.js -- 管理员(如果多则可换成文件夹,最后合并并导出)2). index.js:与视图产生关联3). App.js4). 组件 inner.js(使用connect)二. hooks一. connect1.安装npm i react-redux2.文件代码示例1). store文件夹:创建空仓库index.js – 总控仓库import { cr原创 2020-08-17 23:48:39 · 502 阅读 · 0 评论 -
React-5.2 Redux -- combineReducers优化合并reducer
combineReducers优化合并reducer原始臃肿写法合并写法1合并写法2,combineReducers 终极简洁版原始臃肿写法当数据过于臃肿时,可以用组件化的方式提出来写,再进行合并原始臃肿写法,数据很多时,写法会非常杂,不建议使用。 X X X例如:index 的数据要管理、message 的数据要管理、list 的数据要管理function reducer(state={ index:{info:"首页的数据"}, list:{info:"列表的数据"},原创 2020-07-21 11:20:52 · 480 阅读 · 0 评论 -
React-5.1 Redux 之 状态管理库 -- 核心api
redux核心1. 上节课内容总结2. 课程目标3. redux概念4. 课程内容4.1 为什么使用Redux4.2 核心概念(1). state对象* 纯函数(2). action对象(3). Store对象 (负责存储的仓库)4.3 redux 三大原则4.4 redux 基本应用1). 安装2). 引入3). 创建一个仓库,在仓库中对状态进行管理,参数为一个纯函数4). reducer 纯函数方法1. getState 获取状态方法2. dispatch 修改(1). 修改1次后(2). 修改2次原创 2020-07-21 03:29:16 · 728 阅读 · 0 评论 -
React-4.2 React-router 小案例
react-router路由小案例 -- 点击不同的类型及页码,请求和显示相应内容src1. app.js2. index.js3. index.css4. http.js 请求数据5. router文件夹router.js6. component文件夹6.1 Nav.js 顶部导航6.2 inner.js 列表显示区list.js 中间内容显示区footer.js 底部页码区6.3 page404.jssrc1. app.jsimport React from 'react';import Na原创 2020-07-20 17:19:02 · 255 阅读 · 0 评论 -
React-4.1 React-router
react-router1. 上节课重点内容1.1 函数式组件1.2 React hooks(钩子)React Hooks 优势Hook 使用规则2. 本节课目标3. 课程内容3.1 路由3.2 SPA3.3 SPA 的页面切换机制前端路由4. React Router4.1 基于 Web 的 React Router4.2 安装4.3 组件(1) BrowserRouter 组件(2) HashRouter 组件(3) Route 组件exact:(4) Link 组件to 属性:4.4 传递 props原创 2020-07-14 21:31:59 · 855 阅读 · 0 评论 -
React-3.3 自定义hooks 之 自定义滚动条
用自定义hooks写滚动条app.jshooks.jsindex.js图示自定义hooks需要注意的自定义 Hook 是一个函数命名以 “use” 开头,函数内部可以调用其他的 Hook。在当前函数组件的最顶层调用,(只在最顶层使用 Hook)不要在循环,条件或嵌套函数中调用 Hook, 确保总是在你的 React 函数的最顶层调用他们。app.jsimport React,{useEffect,useState} from 'react';import {useScrollY}原创 2020-07-14 00:26:16 · 1047 阅读 · 0 评论 -
React-3.2 函数式组件、todoList(hooks版本)实战
React-3之函数式组件5. 函数式组件6. React hooks6.1 React Hooks 优势6.2 常用 hook6.2.1 useState6.2.2 useEffect6.2.3 useRef6.3 Hook 使用规则7. 练习 实战 - 完整todoList (hooks版本)7.1 文件app.js7.2 文件index.js7.3 文件list.js7.4 文件opt.js下节课内容练习5. 函数式组件函数式组件中,没有 state 和 生命周期,所以又被称为 无状态组件,在早期原创 2020-07-13 09:27:55 · 1692 阅读 · 1 评论 -
React-3.1 类式组件、todoList(类版本)实战
React-31. 上节课重点内容回顾2. 课程目标3. 课程内容3.1 PureComponent3.2 ref3.3 children3.4 dangerouslySetInnerHTML3.5 key 的问题实战 - 完整todoList函数式组件React hooksReact Hooks 优势常用 hookHook 使用规则练习下节课内容练习1. 上节课重点内容回顾组件间的信息传递生命周期受控组件2. 课程目标掌握React其他 API 使用:PureComponent、ref、原创 2020-07-13 09:25:55 · 365 阅读 · 0 评论 -
React-2 -- setState、组件间通信、组件的生命周期
React-21. 上节课重点内容回顾2. 课程目标3. 课程内容3.1 state 和 setState3.2 组件间通信跨组件通信 context - 扩展3.3 组件的生命周期3.3.1生命周期演变1)之前版本(React 16.3 之前)2)现在使用***挂载阶段**更新阶段**卸载阶段**错误处理*3.4 生命周期函数详解3.5 受控组件3.6 todoList 初实现下节课内容1. 上节课重点内容回顾JSX 注意事项必须有,且只有一个顶层的包含元素 - React.FragmentJ原创 2020-07-13 09:22:38 · 465 阅读 · 0 评论 -
React-1 -- 初识React
React-1课程内容1. React 是什么?2. 命令式编程 和 声明式编程3. 如何使用 React3.1 基于浏览器的模式3.2 babel3.3 JSX插值表达式各种类型内容在插值中的使用输出数据类型列表渲染条件渲染3.4 在属性上使用 表达式JSX 使用注意事项4. 基于自动化的集成环境模式 - create-react-app - 脚手架4.1 介绍4.2 安装与使用安装npmyarn使用npx4.3 项目目录结构说明4.4 命令脚本npm startnpm run testnpm run b原创 2020-07-12 20:20:49 · 819 阅读 · 0 评论