乐胖代购免代理版

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

React

reactjs

原创 2021-07-09 10:46:39 154 阅读

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

React

reactjs

原创 2021-07-09 10:46:37 84 阅读

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>

React

react

原创 2021-07-09 10:46:36 206 阅读

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>

React

react

原创 2021-07-09 10:46:35 141 阅读

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.

React

reactjs

原创 2021-07-09 10:46:34 138 阅读

React 学习笔记 —— refs 属性

字符串 ref注意：过度使用字符串ref 会存在效率问题，该方式可能会在未来的版本中移除class Demo extends React.Component { handleChange = () => { // 可以通过 refs 访问到被引用的标签 this.refs.p.innerText = this.refs.input.value } render () { return ( <div&

React

reactjs

原创 2021-07-09 10:46:33 399 阅读

React 学习笔记 —— 非受控组件与受控组件

非受控组件即未对数据进行收集，现用现取class Demo extends React.Component { handleClick = ()=>{ // 现用现取，当事件触发时，再在回调函数中获取输入框中的值 console.log("账号：" + this.account.value) console.log("密码：" + this.password.value) } render () { return

React

react

原创 2021-07-09 10:46:31 87 阅读

React 学习笔记 —— 组件生命周期

生命周期汇总图线路一class Demo extends React.Component { // 实例化组件时执行 constructor () { super() this.state = { count: 0 } console.log('constructor') } handleAdd = () => { this.setState({

React

react

原创 2021-07-09 10:46:30 252 阅读

React 学习笔记 —— DOM 的 diffing 算法理解

Diff 时 key 的作用key 用来作为唯一标识，便于 newVDOM 跟 oldVDOM 进行比较key 相同的 VDOM 会进行比较，如果内容相同，直接复用真实DOMkey 相同的 VDOM 比较时，如果内容不同，则会重新创建真实DOM如果没有找到相同的key，则直接创建真实DOM使用 index 作为 key 的副作用性能问题：当对数组进行逆序插入、删除等破坏index跟item之间的对应关系的操作时，会产生没有必要的真实DOM更新因为 index 错位，导致

React

reactjs

原创 2021-07-09 10:46:29 184 阅读

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

React

reactjs

原创 2021-07-09 10:46:27 571 阅读

React 学习笔记 —— css 样式的模块化

问题描述当不同组件中的css规则，存在冲突时，高优先级的样式，就会覆盖低优先级的样式，示例如下：目录结构样式冲突Welcome 组件后引入，因此覆盖Hello组件的样式如下当组件越来越多的时候，我们当然不想组件之间产生干扰，看如下两种解决方案css预处理工具（更常用）通过给样式加上区分组件的前缀，避免样式的冲突.hello { h1 { background-color: tomato; }}.welcome { h1 { background-colo

React

react

原创 2021-07-09 10:45:37 977 阅读

React 学习笔记 —— defaultChecked 跟 checked 及 defaultValue 跟 value 的区别

defaultChecked只在初次渲染时生效，更新时不受控制export default class App extends Component { state = { checked: true // 因为初始值为 true，因此在初始渲染时，多选框为选中状态 } handleClick = () => { this.setState({ checked: !this.state.checked // 但由于是 defaultChecked，因此更

React

react

原创 2021-07-09 10:45:36 782 阅读

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

React

react

原创 2021-07-09 10:45:35 326 阅读

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

React

reactjs

原创 2021-07-09 10:45:34 822 阅读

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

React

react

原创 2021-07-09 10:45:32 1248 阅读

React 学习笔记 —— 多级路由刷新页面时样式丢失问题

问题原因：多级路径下，加载样式时，使用相对路径，在刷新时将多级路由也考虑在内// 如下，样式路径 './' 导致加载资源时，需要参考当前路径，因此多级路由会影响资源的加载 <link rel="stylesheet" href="./test.css" />解决方法：使用绝对路径 // 加载根目录下的 test.css ，与当前路由无关 <link rel="stylesheet" href="/test.css" />使用 %PUBLIC_URL%.

React

reactjs

原创 2021-07-09 10:45:31 860 阅读

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> <

React

react

原创 2021-07-09 10:45:30 220 阅读

React 学习笔记 —— redux 的使用

安装使用运行命令yarn add reduxredux 原理图主要流程组件通过 Action Creators 分发(dispatch) action 给 StoreStore 将之前的状态(previousState)、action，传递给 ReducersReducers 对状态处理后，返回给 Store 新的状态组件通过 getState() 获取状态各部分职责Action Creators: 负责生成 action 对象，并分发给 StoreStore：负

React

react

原创 2021-07-09 10:45:29 120 阅读

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() {..

React

react

原创 2021-07-09 10:45:28 93 阅读

React 学习笔记 —— redux 开发者工具安装使用

到Chrome应用商店下载开发者工具将其钉在工具栏，方便观察使用可以看到 redux 开发工具并没有被激活点亮，因为使用它，还需要进行其他配置安装 redux-devtools-extensionyarn add 在 store.js 中引入，并使用import {createStore, applyMiddleware} from 'redux'import {composeWithDevTools} from 'redux-devtools-extension'..

React

react

原创 2021-07-09 10:45:27 1379 阅读

React 学习笔记 —— setState 扩展

写法一调用语法：this.setState(state, [callback])setState 接收的第一个参数，用于描述state的改变setState 是异步改变 state 的，当 setState 改变 state 并调用 render 更新界面之后，会调用 callback适用于 state 的改变不依赖于原状态写法二调用语法：this.setState(updater, [callback])setState 接收的第一个参数为函数，返回值用于描述state的改变upda

React

react

原创 2021-07-09 10:45:26 206 阅读

React 学习笔记 —— 路由组件 lazyLoad

当未使用懒加载时，页面一打开，就将所有的路由组件给加载到页面了如果路由组件很多，且用户不会真正访问到那么多的路由组件，那么就相当于加载了不需要的多余组件因此，可以使用路由懒加载，当用户真正需要访问的时候再去请求如下import {lazy, Suspense} from 'react'import {Route} from 'react-router-dom'const Home = lazy(()=>import './home')const About = lazy(()=&g.

React

react

原创 2021-07-09 10:45:25 133 阅读

React 学习笔记 —— State Hook

在函数式组件中，我们不可以使用 this，因此，也无法使用 this.state为了在函数式组件中使用 state ，需要使用 state Hook如下import React from 'react'// 该函数执行 1+n 将，1次是初始化渲染，n次是更新export default function Count () { // 使用 useState 返回一个组件，[状态，修改状态的方法] // useState 只在第一次执行，取参数作为初始值，并作缓存，后续执行不再使用该参数.

React

react

原创 2021-07-09 10:45:24 140 阅读

React 学习笔记 —— Effect Hook

Effect Hook 可以使得函数式组件也能使用生命周期钩子React.useEffect()接收两个参数，参数1为函数，参数2为数组参数1的函数会在组件挂载、数据更新时调用，参数2表示要监听的数据参数1函数的返回值，会在数据更新、组件卸载时调用模拟 componentDidMount React.useEffect(() => { console.log('componentDidMount') }, []) // 参数2为空数组，表示不监听任何数据，即.

React

react

原创 2021-07-09 10:45:22 141 阅读

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}.

React

react

原创 2021-07-09 10:45:21 158 阅读

React 学习笔记 —— Fragment

在 JSX 的语法中，明确要求，仅能有一个根标签因此，我们往往使用 div 去包裹整个组件标签但这样，会在页面上增加许多无用的 div，并且增加页面的标签层级可以用以下两种方式解决第一种：使用 Fragment 标签，它会在编译时被忽略import {Fragment} from 'react'...<Fragment> <p>test</p> <p>test</p></Fragment>...第二种：.

React

reactjs

原创 2021-07-09 10:45:20 139 阅读

React 学习笔记 —— Context

父子组件传递参数很方便，直接使用 props传递祖孙组件传递参数也可以使用 props 逐层传递，但是对于中间层并不需要使用该参数的组件，也必须接收、并向下传递，非常复杂因此，祖孙组件之间的通信，一般不使用 props，而是Context，如下import React, { Component } from 'react'const MyContext = React.createContext() // 创建一个 Contextconst {Provider} = MyContext //.

React

react

原创 2021-07-09 10:45:19 459 阅读

React 学习笔记 —— PureComponent

普通 Component 存在的问题：只要执行 setState()，即使不改变状态数据，组件也会重新 render()当前组件render时，子组件也会无条件render，即使子组件没有任何更新解决方案一：改写 Component 中的shouldComponentUpdate()，对props、state进行判断，如果不需要更新就返回 false，但这样太麻烦了解决方案二：使用PureComponent代替 Component，该组件自动重写了shouldComponentUpda.

React

react

原创 2021-07-09 10:45:18 158 阅读

React 学习笔记 —— render props

children props往组件里传递内容，可以使用 children props，如下import React, { Component } from 'react'export default class A extends Component { render() { return ( <div> <B> <C/> {/* 组件B 里

React

react

原创 2021-07-09 10:45:17 108 阅读

React 学习笔记 —— 错误边界 ErrorBoundary

当在某个组件出现错误时，整个网页都会报出错误提示但这对用户来说是不友好的因此，我们需要想办法，将错误限制在组件内，并且当错误发生时，进行替换显示如下import React, { Component } from 'react'export default class A extends Component { state = {error: ''} // 父组件通过此方法捕获发生的错误 static getDerivedStateFromError(error) .

React

react

原创 2021-07-09 10:45:15 593 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

wx60e410af77309的博客

React 学习笔记 —— JSX 语法规则

React 学习笔记 —— 组件创建的两种方式

React 学习笔记 —— 事件绑定和 state 属性修改

React 学习笔记 —— 事件绑定和 state 属性修改简写版

React 学习笔记 —— props 属性

React 学习笔记 —— refs 属性

React 学习笔记 —— 非受控组件与受控组件

React 学习笔记 —— 组件生命周期

React 学习笔记 —— DOM 的 diffing 算法理解

React 学习笔记 —— React 脚手架

React 学习笔记 —— css 样式的模块化

React 学习笔记 —— defaultChecked 跟 checked 及 defaultValue 跟 value 的区别

React 学习笔记 —— 使用 axios 发起 ajax 请求

React 学习笔记 —— 配置代理以跨域

React 学习笔记 —— 前端路由 react-router-dom 总结

React 学习笔记 —— 多级路由刷新页面时样式丢失问题

React 学习笔记 —— antd 的使用

React 学习笔记 —— redux 的使用

React 学习笔记 —— redux 示例完整版

React 学习笔记 —— redux 开发者工具安装使用

React 学习笔记 —— setState 扩展

React 学习笔记 —— 路由组件 lazyLoad

React 学习笔记 —— State Hook

React 学习笔记 —— Effect Hook

React 学习笔记 —— Ref Hook

React 学习笔记 —— Fragment

React 学习笔记 —— Context

React 学习笔记 —— PureComponent

React 学习笔记 —— render props

React 学习笔记 —— 错误边界 ErrorBoundary

欢迎