React
tanleiDD
这个作者很懒,什么都没留下…
展开
-
React 学习笔记 —— mounted 回调不只执行一次
前言在开发的时候往往 mounted 回调都只执行一次,因此下意识的觉得这是常识了但其实 mounted 执行次数可以不是一次,取决于 React 在做 Diff 的时候是否卸载原结点代码该代码对 Inner 组件的相关生命周期进行研究通过 toggle 按钮触发App重绘import { useEffect, useState } from "react";const Inner = () => { useEffect(() => { console.log原创 2021-06-29 11:58:54 · 1296 阅读 · 0 评论 -
React 学习笔记 —— Portal
作用portal 即传送门,他可以将组件渲染到指定元素下,而不限于当前书写的 JSX 层级结构用途:当需要将某个元素始终保持在顶层时,可以使用 protal 将其传入到 body 下代码// App.jsximport { createPortal } from "react-dom";const Inner = () => { // 此处返回的 JSX 是经过 createPortal 包装处理过的 return createPortal(<div id="Inner原创 2021-06-29 11:15:41 · 528 阅读 · 0 评论 -
React 学习笔记 —— 错误边界 ErrorBoundary
当在某个组件出现错误时,整个网页都会报出错误提示但这对用户来说是不友好的因此,我们需要想办法,将错误限制在组件内,并且当错误发生时,进行替换显示如下import React, { Component } from 'react'export default class A extends Component { state = {error: ''} // 父组件通过此方法捕获发生的错误 static getDerivedStateFromError(error) .原创 2021-04-09 13:22:34 · 665 阅读 · 0 评论 -
React 学习笔记 —— render props
children props往组件里传递内容,可以使用 children props,如下import React, { Component } from 'react'export default class A extends Component { render() { return ( <div> <B> <C/> {/* 组件B 里原创 2021-04-09 12:43:06 · 537 阅读 · 0 评论 -
React 学习笔记 —— PureComponent
普通 Component 存在的问题:只要执行 setState(),即使不改变状态数据,组件也会重新 render()当前组件render时,子组件也会无条件render,即使子组件没有任何更新解决方案一:改写 Component 中的shouldComponentUpdate(),对props、state进行判断,如果不需要更新就返回 false,但这样太麻烦了解决方案二:使用PureComponent代替 Component,该组件自动重写了shouldComponentUpda.原创 2021-04-09 11:53:49 · 243 阅读 · 0 评论 -
React 学习笔记 —— Context
父子组件传递参数很方便,直接使用 props传递祖孙组件传递参数也可以使用 props 逐层传递,但是对于中间层并不需要使用该参数的组件,也必须接收、并向下传递,非常复杂因此,祖孙组件之间的通信,一般不使用 props,而是Context,如下import React, { Component } from 'react'const MyContext = React.createContext() // 创建一个 Contextconst {Provider} = MyContext //.原创 2021-04-09 10:27:51 · 246 阅读 · 0 评论 -
React 学习笔记 —— Fragment
在 JSX 的语法中,明确要求,仅能有一个根标签因此,我们往往使用 div 去包裹整个组件标签但这样,会在页面上增加许多无用的 div,并且增加页面的标签层级可以用以下两种方式解决第一种:使用 Fragment 标签,它会在编译时被忽略import {Fragment} from 'react'...<Fragment> <p>test</p> <p>test</p></Fragment>...第二种:.原创 2021-04-09 09:40:58 · 429 阅读 · 0 评论 -
React 学习笔记 —— Ref Hook
用以下三种方式创建 Ref 都可以import React from 'react'export default function Count () { const [count ,setCount] = React.useState(0) const myRef = React.createRef() const myRef2 = React.useRef() // Ref Hook 的方式 const myRef3 = {current: undefined}.原创 2021-04-09 09:29:36 · 416 阅读 · 0 评论 -
React 学习笔记 —— Effect Hook
Effect Hook 可以使得函数式组件也能使用生命周期钩子React.useEffect()接收两个参数,参数1为函数,参数2为数组参数1的函数会在组件挂载、数据更新时调用,参数2表示要监听的数据参数1函数的返回值,会在数据更新、组件卸载时调用模拟 componentDidMount React.useEffect(() => { console.log('componentDidMount') }, []) // 参数2为空数组,表示不监听任何数据,即.原创 2021-04-08 22:58:09 · 290 阅读 · 0 评论 -
React 学习笔记 —— State Hook
在函数式组件中,我们不可以使用 this,因此,也无法使用 this.state为了在 函数式组件中使用 state ,需要使用 state Hook如下import React from 'react'// 该函数执行 1+n 将,1次是初始化渲染,n次是更新export default function Count () { // 使用 useState 返回一个组件,[状态,修改状态的方法] // useState 只在第一次执行,取参数作为初始值,并作缓存,后续执行不再使用该参数.原创 2021-04-08 20:43:54 · 272 阅读 · 0 评论 -
React 学习笔记 —— 路由组件 lazyLoad
当未使用懒加载时,页面一打开,就将所有的路由组件给加载到页面了如果路由组件很多,且用户不会真正访问到那么多的路由组件,那么就相当于加载了不需要的多余组件因此,可以使用路由懒加载,当用户真正需要访问的时候再去请求如下import {lazy, Suspense} from 'react'import {Route} from 'react-router-dom'const Home = lazy(()=>import './home')const About = lazy(()=&g.原创 2021-04-08 19:27:36 · 339 阅读 · 1 评论 -
React 学习笔记 —— setState 扩展
写法一调用语法:this.setState(state, [callback])setState 接收的第一个参数,用于描述state的改变setState 是异步改变 state 的,当 setState 改变 state 并调用 render 更新界面之后,会调用 callback适用于 state 的改变不依赖于原状态写法二调用语法:this.setState(updater, [callback])setState 接收的第一个参数为函数,返回值用于描述state的改变upda原创 2021-04-08 19:04:01 · 309 阅读 · 0 评论 -
React 学习笔记 —— redux 开发者工具安装使用
到Chrome应用商店下载开发者工具将其钉在工具栏,方便观察使用可以看到 redux 开发工具并没有被激活点亮,因为使用它,还需要进行其他配置安装 redux-devtools-extensionyarn add 在 store.js 中引入,并使用import {createStore, applyMiddleware} from 'redux'import {composeWithDevTools} from 'redux-devtools-extension'..原创 2021-04-08 16:59:15 · 359 阅读 · 0 评论 -
React 学习笔记 —— redux 示例完整版
描述:组件 Count、组件 Person,将数据存入 Redux,实现数据共享目录结构App.jsimport React, { Component } from 'react'import Count from './containers/Count'import Person from './containers/Person'// 引入 容器组件 并使用export default class App extends Component { render() {..原创 2021-04-08 16:09:12 · 457 阅读 · 0 评论 -
React 学习笔记 —— redux 的使用
安装使用运行命令yarn add reduxredux 原理图主要流程组件 通过 Action Creators 分发(dispatch) action 给 StoreStore 将 之前的状态(previousState)、action,传递给 ReducersReducers 对状态处理后,返回给 Store 新的状态组件通过 getState() 获取状态各部分职责Action Creators: 负责生成 action 对象,并分发给 StoreStore:负原创 2021-04-07 17:12:16 · 415 阅读 · 1 评论 -
React 学习笔记 —— antd 的使用
安装使用antd官网运行yarn add antd引入使用import React, { Component } from 'react'import {Button} from 'antd' // 引入需要的组件import 'antd/dist/antd.css' // 引入样式export default class App extends Component { render() { return ( <div> <原创 2021-04-07 11:51:24 · 539 阅读 · 0 评论 -
React 学习笔记 —— 多级路由刷新页面时样式丢失问题
问题原因:多级路径下,加载样式时,使用相对路径,在刷新时将多级路由也考虑在内// 如下,样式路径 './' 导致加载资源时,需要参考当前路径,因此多级路由会影响资源的加载 <link rel="stylesheet" href="./test.css" />解决方法:使用 绝对路径 // 加载 根目录下的 test.css ,与当前路由无关 <link rel="stylesheet" href="/test.css" />使用 %PUBLIC_URL%.原创 2021-04-06 12:41:57 · 707 阅读 · 1 评论 -
React 学习笔记 —— 前端路由 react-router-dom 总结
路由理解当使用 hash 或 history 的方式去改变网址路径(path)时,并不会刷新网页或发出请求通过监听 hash 或 history 的变化来动态的切换组件的显示据此,可以维护 path(路径) 跟 component(组件) 的 一对一的路由而管理这些route(路由)的就是router(路由器)简单 demo主要目录结构index.jsimport React from 'react';import ReactDOM from 'react-dom';imp原创 2021-04-05 19:17:55 · 375 阅读 · 0 评论 -
React 学习笔记 —— 配置代理以跨域
配置 package.json在 package.json 中 追加如下配置"proxy":"http://localhost:5000"假设 前端项目运行在 3000 端口,那么,向3000 端口发起请求,且 3000 端口不存在对应资源时,请求就会转发给 5000 端口创建 setupProxy在src下创建配置文件:src/setupProxy.js编写setupProxy.js配置具体代理规则: const proxy = require('http-prox原创 2021-04-05 10:43:15 · 266 阅读 · 0 评论 -
React 学习笔记 —— 使用 axios 发起 ajax 请求
安装 axios命令行运行:yarn add axios使用案例准备测试用的后端接口const express = require('express')const app = express()app.use((request,response,next)=>{ console.log('有人请求服务器1了'); console.log('请求来自于',request.get('Host')); console.log('请求的地址',request.url); ne原创 2021-04-05 10:00:35 · 336 阅读 · 0 评论 -
React 学习笔记 —— defaultChecked 跟 checked 及 defaultValue 跟 value 的区别
defaultChecked只在初次渲染时生效,更新时不受控制export default class App extends Component { state = { checked: true // 因为初始值为 true,因此在初始渲染时,多选框为选中状态 } handleClick = () => { this.setState({ checked: !this.state.checked // 但由于是 defaultChecked,因此更原创 2021-04-04 10:05:04 · 2218 阅读 · 0 评论 -
React 学习笔记 —— css 样式的模块化
问题描述当不同组件中的css规则,存在冲突时,高优先级的样式,就会覆盖低优先级的样式,示例如下:目录结构样式冲突Welcome 组件后引入,因此覆盖Hello组件的样式如下当组件越来越多的时候,我们当然不想组件之间产生干扰,看如下两种解决方案css预处理工具(更常用)通过给样式加上区分组件的前缀,避免样式的冲突.hello { h1 { background-color: tomato; }}.welcome { h1 { background-colo原创 2021-04-03 20:03:05 · 784 阅读 · 0 评论 -
React 学习笔记 —— React 脚手架
安装使用全局安装npm install -g create-react-app创建项目create-react-app hello-react启动项目cd hello-reactnpm start文件目录解读.git:git 管理文件node_moudles: node 模块public:公共资源src:代码主要写在这里面.gitignore: git的忽略文件,描述哪些文件不用管理package.json:node 包的配置文件,描述应用信息、命令等RE原创 2021-04-03 19:23:15 · 301 阅读 · 0 评论 -
React 学习笔记 —— DOM 的 diffing 算法理解
Diff 时 key 的作用key 用来作为唯一标识,便于 newVDOM 跟 oldVDOM 进行比较key 相同的 VDOM 会进行比较,如果内容相同,直接复用真实DOMkey 相同的 VDOM 比较时,如果内容不同,则会重新创建真实DOM如果没有找到相同的key,则直接创建真实DOM使用 index 作为 key 的副作用性能问题 :当对数组进行逆序插入、删除等破坏index跟item之间的对应关系的操作时,会产生没有必要的真实DOM更新因为 index 错位,导致原创 2021-04-03 13:27:48 · 298 阅读 · 2 评论 -
React 学习笔记 —— 组件生命周期
生命周期汇总图线路一class Demo extends React.Component { // 实例化组件时执行 constructor () { super() this.state = { count: 0 } console.log('constructor') } handleAdd = () => { this.setState({原创 2021-04-02 22:41:30 · 289 阅读 · 1 评论 -
React 学习笔记 —— 非受控组件与受控组件
非受控组件即未对数据进行收集,现用现取class Demo extends React.Component { handleClick = ()=>{ // 现用现取,当事件触发时,再在回调函数中获取输入框中的值 console.log("账号:" + this.account.value) console.log("密码:" + this.password.value) } render () { return原创 2021-04-02 17:34:59 · 238 阅读 · 0 评论 -
React 学习笔记 —— refs 属性
字符串 ref注意:过度使用字符串ref 会存在效率问题,该方式可能会在未来的版本中移除class Demo extends React.Component { handleChange = () => { // 可以通过 refs 访问到被引用的标签 this.refs.p.innerText = this.refs.input.value } render () { return ( <div&原创 2021-04-02 13:17:14 · 319 阅读 · 0 评论 -
React 学习笔记 —— props 属性
this.state 是组件内部产生的数据this.props 是从组件外面,通过属性传入到组件中的数据<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d.原创 2021-04-01 23:05:59 · 396 阅读 · 0 评论 -
React 学习笔记 —— 事件绑定和 state 属性修改简写版
代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原创 2021-03-31 13:27:04 · 258 阅读 · 0 评论 -
React 学习笔记 —— 事件绑定和 state 属性修改
代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原创 2021-03-31 12:23:38 · 293 阅读 · 0 评论 -
React 学习笔记 —— 组件创建的两种方式
函数式组件定义一个函数,命名时首字母大写,其返回一个VDOM<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-s原创 2021-03-31 10:16:47 · 218 阅读 · 0 评论 -
React 学习笔记 —— React 开发者工具安装
在chrome地址栏输入 chrome://extensions/ 回车点击扩展程序打开应用商店(需要VPN)搜索 react developer tools认准提供方 facebook,然后添加可以在扩展程序页面看到已经添加成功将其钉住,方便查看如果当前页面是由react开发,则该开发者工具会被激,例如:美团官网然后在控制台中,可以看到多出了两个选项其中 Components中,包含了组件信息,Profiler包含了性能信息..原创 2021-03-30 23:04:14 · 403 阅读 · 0 评论 -
React 学习笔记 —— JSX 语法规则
定义VDOM时,不要用引号包起来// 错误的写法const VDOM = '<h1>hello, react</h1>'// 正确的写法const VDOM = <h1>hello, react</h1>使用表达式时,需要用{}括起来let name = 'react'// 错误的写法const VDOM = <h1>name</h1>// 正确的写法const VDOM = <h1>{nam原创 2021-03-30 22:11:59 · 290 阅读 · 0 评论 -
React 学习笔记 —— 为什么使用 JSX,而不是 JS 去创建 VDOM
使用 JSXconst VDOM = ( <h1 id="title"> <span>Hello, React</span> </h1>) 使用 JSconst VDOM = React.createElement('h1', {id: 'title'}, React.createElement('span', {}, 'Hello, React'))对比使用 JSX,通过HTML的语法格式直接来描述VDOM,代码直观,便于书写原创 2021-03-30 16:57:03 · 302 阅读 · 0 评论