![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
文章平均质量分 73
LittleMoon_lyy
这个作者很懒,什么都没留下…
展开
-
React Hooks(六) useRuducer
一 关于useRuducer的用法useRuducer是useState的升级版本,当状态更新逻辑比较复杂的时候,就应该考虑使用useReudcer,因为useReducer比useState更擅长描述如何更新状态,并且通过使用useReducer的dispatch能减少状态值的传递。用法:const [state, dispatch] = useReducer(reducer, initialState);看一个简单的例子:const initialState = { n: 0,};c原创 2022-05-15 16:47:13 · 416 阅读 · 0 评论 -
React之Redux (三) 中间件和异步
一 为什么要用中间件从前两篇文章中可以知道,更新Redux中状态的流程是:action -> reducer -> new state。那么问题来了。每次action被触发(dispatch)。reducer就会同步地对store进行更新,在实际开发项目的时候,有非常多需求都是须要通过接口等形式获取异步数据后再进行更新操作的。怎样异步地对store进行更新呢?这里就需要新的工具:中间件middleware二 有哪些中间件Redux本身提供的Api与功能并不多,可是它提供了一个中间件(插原创 2022-05-03 23:08:01 · 837 阅读 · 0 评论 -
React之React-Redux用法(二 )
React-ReduxRedux实现了一个store作为数据存储中心,可以供外部访问,修改等,这就是Redux的思想。但是Redux本身是和React没什么本质联系,只不过Redux的这种数据管理方式和React的数据驱动视图理念很合拍。现在既然有了一个安全的地方存取数据,怎么结合到React里面呢?我们可以在应用初始化的时候,创建一个store = createStore(reducer),然后在需要的地方通过store.getState()去获取数据,通过store.dispatch去更新数据,通过原创 2022-05-03 21:25:04 · 149 阅读 · 0 评论 -
React之Redux用法(一)
ReduxRedux是将整个应用状态存储到store,store里存在一个状态树state tree组件可通过store.dispatch派发行为action给store,store不会直接修改state,而是通过用户编写的reducer来生成新的state,并返回给store其他组件通过订阅store中的state状态来刷新试图注意点:整个应用有且只有一个store,其内部的state tree存储整个应用的statestate是只读的,修改state只能通过派发action,需要通过原创 2022-05-03 18:01:40 · 459 阅读 · 0 评论 -
React Hooks(五) useCallback和useMemo
一 React.memo和useMemo1.memo的作用当父组件的数据变化时,代码会重新执行一遍,子组件数据没有变化也会执行,这个时候可以使用memo将子组件封装起来,让子组件的数据只在发生改变时才会执行。我们先来看一个不用memo的例子:改变count和num的值都会触发子组件的重新渲染import React, { useEffect, useCallback, useState, useMemo } from 'react';import Test4 from './Test4'co原创 2022-05-02 23:20:09 · 754 阅读 · 0 评论 -
React Hooks(四) useRef
一 介绍useRef是一个返回可变引用对象的函数,该对象current属性的初始值为传入的initialValue,且返回的对象在组件整个生命周期中持续存在。1.用法通过ref属性完成对DOM元素的引用通过useRef()实现初始赋值通过current属性查看值import {useRef} from 'react';const ref = useRef(initialValue);···//可以在组件生命周期的任何时间log该属性以查看其值console.log(ref.curr原创 2022-05-02 16:02:43 · 1182 阅读 · 0 评论 -
React Hooks(三) useContext
react hooks(三) useContextuseContext()可以用于组件之间共享状态。使用方法1.引入createContext, useContext2.通过createContext来创建句柄3.通过Context.Provider来确定共享范围4.通过value来分发内容5.在子组件中通过useContext(Context)来获取数据现在有俩组件,需要共享状态,如下:<div className="test"> <Navbar /> <原创 2022-04-30 23:48:29 · 457 阅读 · 0 评论 -
React Hooks(二) useEffect
一 介绍useEffect是在React更新DOM之后运行一些额外的代码,也就是执行副作用操作,比如请求数据,设置订阅,手动更改React组件中的DOM等。二 用法useEffect(() => { // 相当于 componentDidMount、componentDidUpdate console.log("code"); return () => { // 相当于 componentWillUnmount console.log("code"); }原创 2022-04-30 21:56:03 · 389 阅读 · 0 评论 -
React Hooks(一) useState
一 什么是React Hooks在讲useState的用法之前,先来看看什么是React Hooks。hooks其实就是有状态的函数式组件。闭包,是react hooks的核心。闭包闭包是一个特殊的对象,由两部分组成,执行上下文的A以及在A中创建的函数B。当执行B时,如果访问了A中的变量对象,那么闭包就会产生。 // 执行上下文,这里暂时写为一个函数,它也可以指一个模块 const A = () => { const a = "aaa" const B = () =>原创 2022-04-30 21:11:24 · 320 阅读 · 0 评论 -
react中使用styled-components制作动画
一 简单介绍1. 一个简单的效果页面数字从0开始每隔一段时间+1,到10后数字有一个放大缩小的动画,如下:2.如果不使用styled-components,我们可以这么做:import React, { useEffect, useRef, useState } from 'react';import styles from './index.module.scss'const Test2 = () => { const [count, setCount] = useState(0原创 2022-02-12 20:53:59 · 999 阅读 · 0 评论 -
react中的css
css一直是react的痛点,也是被很多开发者诟病的一个点。在组件化中选择合适的CSS解决方案应该符合以下条件:可以编写局部css:css具备自己的具备作用域,不会随意污染其他组件内的原生;可以编写动态的css:可以获取当前组件的一些状态,根据状态的变化生成不同的css样式;支持所有的css特性:伪类、动画、媒体查询等;编写起来简洁方便、最好符合一贯的css风格特点;等等…在这一点上,Vue做的要远远好于React:Vue通过在.vue文件中编写 Vue在CSS上虽然不能称之为完美,但转载 2022-02-10 15:58:44 · 502 阅读 · 0 评论 -
react hooks踩坑合集
react hooks原创 2022-01-28 14:27:36 · 1220 阅读 · 0 评论 -
react Render机制
react Render机制原创 2022-01-28 14:10:39 · 1129 阅读 · 0 评论