随笔分类 - react
摘要：前言 ref转发的使用场景比较少见，但是我们在编写组件库的时候，可能会需要使用到他，react.forward只适用于函数式组件 举个列子 定义了一个FancyButton组件 const FancyBotton = (props: any) => { return ( <div> <button>
阅读全文
摘要：前言 在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但这种做法对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI 主题），这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递
阅读全文
摘要：前言 useEffect和useLayout，都是react为函数组件提供的取代class组件周期，componentDidMount，componentDidUpdate的hook。它们的作用完全一致，只是调用的时机不同 调用时机 useEffect: 与componentDidMount、com
阅读全文
摘要：前言 useMome和useCallback实现原理完全一致 useMemo(() => fn, []); //等效于 useCallback(fn, []); 不同的点 useCallback //第一个参数接收一个函数，useCallback调用后返回一个新的被缓存的记忆函数 useCallba
阅读全文
摘要：前言 react-router-dom4和5版本是一致的，在6.0版本以后会有较大的改动 4和5版本官方文档 6版本官方文档 嵌套路由 路由入口 import { BrowserRouter, Route, Switch } from "react-router-dom"; import { cre
阅读全文
摘要：前言 如果你对redux还不太熟悉，那么建议你先看完我的这篇文章再继续阅读 准备工作 1.使用react-router-dom搭建路由 2.使用redux搭建是store 例子 router import {HashRouter, Switch} from "react-router-dom"; i
阅读全文
摘要：前言 1.redux是一个js库，她和react没有任何的依赖关系，你可以在vue、react甚至原生的js中使用redux 2.react-redux，是一个连接redux和react的库，里面封装了一些api，使你在react中使用redux更加的方便，这块，我们后续在做展开 redux 核心概
阅读全文
摘要：现在市面上react有不少的路由管理库 react-router react-router-dom 相信刚接触的react的时候，你会因为不知道如何去选择路由管理库而苦恼，但是一旦你清楚了它们之间的关系这个困惑就会消失。 react-router 这个库实现了路由管理的核心功能 react-rout
阅读全文
摘要：前言 在开发模式下，你可能会发现在组件第一次初始话的时候或者时更新的时候，对应的生命周期会出现运行两次的情况，这是因为在开发模式下，react使用了<React.StrictMode>组件,你可以直接在根目录下的index.tsx中注释掉他 生命周期图鉴 生命周期列表 constructor(pro
阅读全文
摘要：现在使用脚手架（react-create-app）的项目不需要在在css文件后面添加module就会自动为其添加模块化后缀 在react 中使用css有以下几种方法 第一种全局使用 app.js import React from 'react'; import Router from "./rou
阅读全文
摘要：前言 本文使用的react-router-dom版本4.x react 和vue一样都是使用封装history 来进行页面跳转，下面就来说一下react常用的路由插件react-router-dom这个东西在GitHub上 目前是最受欢迎的 首先还是先下载 npm i react-router-do
阅读全文
浙公网安备 33010602011771号