摘要：使用react-redux的可以将redux与UI组件分开，使组件内不包含任何与redux相关的函数，文件，像store,dispatch,subscribtion这些都不会在UI组件里出现，而所有的状态与派发action的函数都由一个容器组件通过props的形式传递给UI组件，使得UI组件显得更加
阅读全文
02 2022 档案
摘要：redux中最主要的东西就三个：store，reducer，action store可以说是redux的躯干，由它撑起一个架子，所有被管理的状态也是由它存储（正如它的名字store） action是描述所要执行的任务以及传递要进行操作的数据（如果需要的话） reducer则是一个执行者，根据acti
阅读全文
摘要：一，为什么使用路由 使用路由可通过修改地址栏的URL来达到显示不同页面的效果（不依赖于服务端） 在react中使用路由需要下载并引入react-router-dom $ npm i react-router-dom 使用NavLink来指定跳转的路由,其中的属性to指定路由名称 使用Route来匹配
阅读全文
摘要：useRef()可以用来绑定元素节点和保存变量 import React, { useRef, useState } from 'react' export default function UseRef() { const index = useRef(0) const myRef = useRe
阅读全文
摘要：useMemo()和useCallback()都能够起到缓存的作用，只不过useMemo()针对于数据，useCallback()针对于函数 useMemo() 不使用useMemo() 当点击按钮时会改变value的值，同时也会一直执行console.log(1)，即take函数一直在被调用 im
阅读全文
摘要：在函数式组件里面使用useEffect（）可以实现在类式组件里面的生命周期的效果 使用： useEffect(()=>{},[])第一个参数是一个回调函数，在里面编写要进行的操作，第二个参数是依赖，如果数组为空，说明不依赖于任何的状态，回调函数里面的操作只会在初始化时执行一次，后续状态更新不会执行里
阅读全文
摘要：函数式组件通过使用useState()可以创建自己的状态 使用： 1、首先从React中引入useState 2、const [state,setState] = useState(initialState)，useState的返回值是一个数组，包含两个值，第一个是所定义的状态，第二个是设置状态的函
阅读全文
摘要：组件生命周期大体上分为三个阶段：1.组件初始化2.组件更新3.组件卸载 旧版生命周期 一、 componentWillMount() render() componentDidMount() 二、 componentWillReceiveProps(nextProps) shouldComponen
阅读全文
摘要：在React中也有插槽技术 类似普通的HTML双标签,React组件也可以写成双标签的形式，并在标签之间插入内容 class Demo extends React.Component { render(){ return <div> <Child> <li>列表1</li> <li>列表2</li>
阅读全文
摘要：使用发布订阅需要下载并引入一个库 npm i pubsub-js import Pubsub from 'pubsub-js' 发布 Pubsub.publish('message',data) 第一个参数是发布的消息的名称，用于与订阅者相匹配，第二个参数可以是数据，也可以是一个回调函数 订阅 Pu
阅读全文
摘要：区分受控组件与非受控组件的标志是组件中的input等表单元素的值的来源与去向是否受到组件状态的影响，如果受到状态的影响，则称为受控组件，反之为非受控组件 狭义的受控组件：针对于表单控件而言，表单控件的value值受状态的控制，并且会影响到状态 受控组件 class Demo extends Reac
阅读全文
摘要：一、react的ref属性用于选中元素标签，继而对元素节点进行操作 1、字符串形式的ref(已被弃用) class Demo extendss React.Component { state{ name:'大明', age:18 } changeName= ()=>{ this.setState{
阅读全文
摘要：一， 类式组件使用props props属性用于给组件传递参数，且是只读属性 使用： class Demo extends React.Component{ render(){ const {name,age}=this.props return <div> <p>我的名字是{name}，我今年{a
阅读全文
摘要：1、在类里面，可以定义 构造函数 class Demo { constructor(name,age){ this.name=name this.age=age } 一般方法（在类的原型对象上） class Demo { constructor(name,age){ this.name=name t
阅读全文
摘要：一、类知识回顾 class是es6新增的用于创建对象模板的关键字 创建一个类 //类名首字母要大写 class Person { //当创建一个没有继承任何父类的类时，需要编写constructor函数来为类的实例对象添加属性 constructor(name,age){ this.name=nam
阅读全文
摘要：react中组件有两种，函数式组件及类式组件，下面将简单记录下函数式组件的学习 函数式组件的定义就如同他的名字一样，直接定义一个函数就行 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta
阅读全文