![](https://img-blog.csdnimg.cn/20190927151101105.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
React全家桶
React全家桶知识整理
如果是兔子
知识的搬运工
展开
-
React Hooks
一、基础的State Hook和Effect Hook第一段代码function Myfunc() { const [count, setCount] = useState(0);//State Hook useEffect(() => {//Effect Hook const interval = setInterval(() => { setCount((c) => c + 1); }, 1000); return () => c原创 2020-10-28 14:01:07 · 251 阅读 · 1 评论 -
Redux(四):如何操作不可变数据(如何操作state)
一、操作不可变数据的四种方法这是state,我们来操作他const state = { filter: 'completed', todos: [ 'Learn React' ] }下面是操作它的方法① {…}const newState = { ...state, todos: [ ...state.todos, 'Learn Redux' ]}② Object.assignconst newState = Object.assign( {}, state, { todos:[ ...s原创 2020-07-31 15:53:49 · 412 阅读 · 0 评论 -
Redux(三):中间件和异步action
一、Redux的Middlewares① 当一个action被dispatch之前,会经过Middleware。② 这个Middleware的作用是去截获某种特殊的类型的action,比方说Ajax请求这种类型的action,会有一个redux-thunk这样一个中间件去处理。当Middleware接收到这个action的时候,不是直接把他丢给dispatch给reducer,而是去访问一个API,当API的返回结果为true,则dispatch一个成功的action,如果为false,就dispatc原创 2020-07-31 15:24:31 · 181 阅读 · 0 评论 -
Redux(二):在React中使用Redux
一、使用模型React使用Redux需要用到connect这个概念从react-redux这个package引入以后,就可以使用了但其实connect没有什么好讲的,套用下面这个模型就可以了① Redux连接React的大致模型如下:import { Provider, connect } from 'react-redux'class A extends Component { //这个是想要使用redux的组件}/****需要弄一个store出来**/// 按照组件的原创 2020-07-30 20:25:34 · 112 阅读 · 0 评论 -
Redux(一):纯Redux
一、什么是Store① 产生storeconst store = createStore(reducer)② store的方法:getState():得到状态dispatch(action):dispatchaction给reducersubscribe(listener):当store有任何变化的时候都会调用他的回调函数二、什么是actionaction就是一个普普通通的对象,描述了更新state的操作,就像setState一样。但是它只是一个对象,只有描述,没有真正的去更新Store(原创 2020-07-30 18:03:29 · 95 阅读 · 0 评论 -
React Router(二):URL传参和嵌套路由
一、如何通过URL传递参数URL传递参数是传给匹配到的组件,组件可以根据参数渲染不同的内容很简单,所以直接上代码了,结合注释看import React from "react";import { BrowserRouter as Router, Route, Link} from "react-router-dom";//这是一个路由的组件//对于React Router render的组件,会传一个match的props给这个组件const Topic = ({ match原创 2020-07-31 17:01:34 · 492 阅读 · 0 评论 -
React Router(一):React Router基本语法
一、路由实现的基本架构① 路由的定义我们会通过一个配置文件或者是一个react标记来定义一些路由//一个路由对应一个组件/topic/:id -> Topic/topics -> List/about -> About② 组件容器通常是页面布局的一部分,就是由路由来控制具体展示哪一个组件。当url发生变化的时候其实只是组件容器发生变化,其他不发生变化。③ Router一个路由的定义通过一个Router的解析会返回不同的组件,放到组件容器中。二、React R原创 2020-07-31 16:38:01 · 314 阅读 · 1 评论 -
React基础篇(五):受控组件和非受控组件
一、受控组件和非受控组件的介绍HTML表单在React中使用起来有所不同,官方文档是这么说的:在 React 里,HTML 表单元素的工作方式和其他的 DOM 元素有些不同,这是因为表单元素通常会保持一些内部的 state。要在React里面实现HTML表单,必须做一些特殊处理。官方文档里面有两种方式:受控组件和非受控组件但大多数情况下,使用 JavaScript 函数可以很方便的处理表单的提交, 同时还可以访问用户填写的表单数据。实现这种效果的标准方式是使用“受控组件”。有时使用受控组原创 2020-07-30 16:59:00 · 285 阅读 · 0 评论 -
React基础篇(四):Context API
一、什么是Context API① Context API解决的是一个组件间通信的问题,有一些全局的状态我们需要多个组件都去使用,但是组件如果都是一层层传递会非常麻烦,所以我们可以使用Context API来避免这种层层传递,实现跨层使用state。② 在Context API中,节点有两种类型:provider和consumer。provider就是提供状态的那个组件,consumer是使用状态的那个组件。③ 我们要实现Context API通信,必须把consumer包含在provider层级之下原创 2020-07-30 11:11:29 · 711 阅读 · 0 评论 -
React基础篇(三):函数作为子组件
一、什么是函数作为子组件① 函数作为子组件也是一种组件复用的方式,它利用了children这个属性。② children 是 React 组件的一个特殊内置属性,xxx 里的 xxx 部分会作为 children 传递给 Comp 组件,如果 xxx 是函数,那么 Comp 里主动调用它去得到结果。③ 如果xxx是函数,只要在组件内部加上一个children(value),就会调用这个xxx函数二、具体实例1、下面是xxx 的一个例子,下面两个都是用的AdvancedTabSelector组件,组原创 2020-07-30 09:33:57 · 853 阅读 · 0 评论 -
React基础篇(二):React高阶组件(HOC)
一、高阶组件(HOC)1、什么是高阶组件 ① 高阶组件接受一个组件作为参数,返回一个新的组件(就像函数一样,传进来一个值,返回一个新值)。 ② 高阶组件是对某个组件进行的一个封装,形成的一个新组件。当一个组件进到一个高阶组件里面,出去以后他的功能性就变强了(会多出一个属性)。为什么会变强呢?高阶组件会得到这个被封装的组件里面的状态,这个状态会传给跑进来的组件,这个作为参数的组件有了新的状态 ,作为返回值返回,然后就变强了。 ③ 由此,返回的新组件具有两个数据来源,一个来自于父组件,另一个原创 2020-07-29 21:33:31 · 178 阅读 · 0 评论 -
React基础篇(一):React生命周期及其使用场景
1、首先大致一下生命周期三个类型和三个阶段三个类型:创建时、更新时、卸载时三个阶段:“Render”阶段、“Pre-commit”阶段、“Cimmit”阶段2、生命周期方法的调用过程①创建时:一、“Render”阶段先执行构造函数constructor:一个组件首先要创建出来getDerivedStateFromProps:用于从一些外部的属性初始化一些状态,从这个方法返回的状态都可merge到当前的状态上render:描述你的UI的dom结构的地方,这个也是唯一一个必须定义的生命周期方法原创 2020-07-29 20:08:51 · 685 阅读 · 0 评论