摘要：
React基础 0.JavaScript基础知识 1.React语法规则 2.React组件及其三大属性 3.React事件处理、收集表单数据、高阶函数 4.React生命周期 5.key的使用 React高级 1.Tolist案例（父子传参实现增删改） 2.github搜索案例（axios、pub 阅读全文
摘要：
2.react-redux的使用 npm install --save react-redux 1.基本使用 containers/Count.jsx -- 容器组件 -- 用于传递 redux保存的状态和操作状态的方法 到 UI组件中 // 引入Count的UI组件 import CounUI f 阅读全文
摘要：
1.redux的使用 核心概念 action 动作的对象 包含2个属性 type：标识属性, 值为字符串, 唯一, 必要属性 data：数据属性, 值类型任意, 可选属性 例子：{ type: 'ADD_STUDENT',data:{name: 'tom',age:18} } reducer 用于初 阅读全文
摘要：
4. render props和Error boundary(错误边界) 4.1 render props 如何向组件内部动态传入带内容的结构(标签)? Vue中: 使用slot技术, 也就是通过组件标签体传入结构 <A><B/></A> React中: 使用children props: 通过组件 阅读全文
摘要：
3. context和optimize优化 3.1 context context用于祖孙组件之间的传参 import React, {Component} from 'react'; import './index.css' // 创建一个context组件，供传递数据使用 const MyCon 阅读全文
摘要：
2.hook和Fragment 2.1 hook 1. React Hook/Hooks是什么? (1). Hook是React 16.8.0版本增加的新特性/新语法 (2). 可以让你在函数组件中使用 state 以及其他的 React 特性 2. 三个常用的Hook (1). State Hoo 阅读全文
摘要：
1. setState和lazyLoad懒加载 1.1 setState setState更新状态的2种写法 (1). setState(stateChange, [callback]) 对象式的setState 1.stateChange为状态改变对象(该对象可以体现出状态的更改) 2.callb 阅读全文
摘要：
5.编程式路由导航 1.push和replace模式 {/* 路由模式改成replace替换 , 默认为push堆栈 */} <Link replace to={{pathname: '/home/message/detail', state:{id:msgObj.id, title: msgObj 阅读全文
摘要：
4.React路由传参 class Message extends Component { state = { messageArr: [ {id: '01', title: '消息1'}, {id: '02', title: '消息2'}, {id: '03', title: '消息3'}, ] 阅读全文
摘要：
3.React路由 npm i react-router-dom 0.路由器 BrowserRouter 和 HashRouter 需在整个APP外层包裹一个路由器才能正常使用注册路由 import {BrowserRouter, HashRouter} from "react-router-dom 阅读全文
摘要：
2.github搜索案例（axios、pubsub、fetch） 目录结构 实现效果： 2.1使用axios发送请求 App.jsx class App extends Component { state = { users: [], // 初始化状态，users初始值为数组 isFirst: tr 阅读全文
摘要：
1.Tolist案例（父子传参实现增删改） 目录结构 实现效果： App.jsx class App extends Component { // 状态在哪里， 操作状态的方法就在哪里 state = { todos:[ {id:1, name:'吃饭', done: true}, {id:2, n 阅读全文
摘要：
5.key的使用 /* 1）. react/vue中的key有什么作用？（key的内部原理是什么 2）. 为什么遍历列表是，key最好不要用index? 1.虚拟DOM中key的作用： 1）.简单来说，key是虚拟DOM对象的标识，在更新显示时key起着极其重要的作用 2）.详细来说： 当状态中的数 阅读全文
摘要：
4.React生命周期 4.1引出生命周期 class Life extends React.Component { state = { opacity:0.5 } death = () => { // 卸载定时器 // clearInterval(this.timer) // 卸载组件 React 阅读全文
摘要：
3.React事件处理、收集表单数据、高阶函数 3.1事件处理 class Demo extends React.Component { /* 1. 通过onXxx属性指定事件处理函数(注意大小写) a) React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 为了更好的兼容性 b) R 阅读全文
摘要：
2.React组件及其三大属性 2.1函数式组件 function Demo(){ console.log(this) return <h2> 函数式组件</h2> } // ReactDOM.render(Demo(), document.getElementById('test')) React 阅读全文
摘要：
1 React语法规则 1.1 使用jsx创建虚拟DOM <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello react</title> </head> <body> <!--准备好一个“容器”--> 阅读全文
摘要：
0.JavaScript基础知识 0.1类的基本知识 ES6语法在类中默认开启了use strict严格模式 class Person{ constructor(name, age) { this.name = name this.age = age } speak(a,b){ console.lo 阅读全文