react
关注
分享
扫一扫
react框架学习
木子 旭
总结一下自己学到的东西，希望对爱学习的你们能提供一分帮助
展开
-
react（64）——将html中的style样式转化成为react组件中的style样式
1.html中的样式是一个字符串，而react组件将样式作为一个对象放入style中，html<div style="display: inline-block; float: left; margin-top: 20px; height: 10px; border-right: solid 1px #D0D0D0; width: ' + (5 - startwidth) * GraphPercentage +'%;"> </div>react<原创 2021-05-05 11:51:00 · 762 阅读 · 0 评论 -
react（1）——虚拟DOM概念理解
虚拟DOM的英文虚拟DOM（Virtual Document Object Model）DOM的本质通过js操作页面上的元素（input，tr…… ）什么是React中的虚拟DOM是框架中的概念，程序员用js对象来模拟页面上的DOM树虚拟DOM的目的实现DOM元素的高效更新用实例讲解如果要将一个表格按照某一列排序，我们是通过对表格的对象数组实现重新排序后，再将整个数组重新渲染到页面上，这会很浪费资源且不高效。我们可以用虚拟DOM模拟一个更新后的DOM树，与原来的DOM树进行对比，在原来原创 2020-11-24 09:56:12 · 292 阅读 · 0 评论 -
react（2）——之diff算法理解
Diff算法Diff算法（Different算法）：对比两个DOM树Diff分为三个过程：tree diff、component diff、element diff。tree diff新旧两个DOM树，逐层对比的过程；当整个DOM树逐层对比完毕，则所有需要被更新的元素必然能被找到；component diff在进行Tree Diff的时候，每一层中，组件级别的对比。如果对比前后，组件的类型相同，则暂时认为此组件不需要被更新；如果对比前后，组件类型不同，则需要移除旧组件，创建新组件，并追加原创 2020-11-24 10:09:47 · 439 阅读 · 0 评论 -
react（3）——导入了正确的包，但是运行不出来，原因是因为导入包的顺序有问题
源代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>01_HelloWorld</title> <script src="../js/react-dom.development.js"></script> <script src="../js/react.development.原创 2020-12-14 09:39:41 · 574 阅读 · 0 评论 -
react（4）——使用react动态展示列表数据，数组的map方法，React.render方法
代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>02_JSX_DEMO</title> <script src="../js/react.development.js"></script> <script src="../js/react-dom.development.js"&原创 2020-12-14 20:43:52 · 1761 阅读 · 0 评论 -
react（5）——创建虚拟dom的方式在type=“text/babel“时和type=“text/javascript“不同
代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>02_JSX</title> <script src="../js/react.development.js"></script> <script src="../js/react-dom.development.js">&l原创 2020-12-14 21:06:27 · 1545 阅读 · 1 评论 -
react（6）——两种定义组件的方式，通过方法定义和通过类继承React.Component来定义
代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>03_component_basic</title> <script src="../js/react.development.js"></script> <script src="../js/react-dom.developme原创 2020-12-14 21:21:16 · 516 阅读 · 0 评论 -
react（7）——state属性，绑定方法，点击页面内容使其改变
代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>04_component_state</title> <script src="../js/react.development.js"></script> <script src="../js/react-dom.developme原创 2020-12-14 21:59:01 · 294 阅读 · 0 评论 -
react（8）——简单的了解props属性
代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>05_component_props</title> <script src="../js/react.development.js"></script> <script src="../js/react-dom.developme原创 2020-12-15 21:20:15 · 146 阅读 · 0 评论 -
react（9）——ref属性和事件处理属性
代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>06_component_refs_event</title> <script src="../js/react.development.js"></script> <script src="../js/react-dom.deve原创 2020-12-16 10:26:45 · 706 阅读 · 0 评论 -
react（10）——三大属性state，props，refs，总结其特点
state组件内部定义的属性props从组件外部传入的数据，当调用该组件时，标签上的数据refs组件内部的标识符原创 2020-12-16 10:32:12 · 255 阅读 · 0 评论 -
react（11）——实现子组件更改父组件的state
要实现的界面以及功能实现代码首先我们要创建三个组件，一个父组件，两个子组件。父组件为App，子组件为Add和ListApp组件//App组件 class App extends React.Component{ constructor(props) { super(props); this.state={ todos:['吃饭','睡觉','敲代码'] }原创 2020-12-16 15:26:22 · 2711 阅读 · 0 评论 -
react（12）——收集表单数据
需求点击提交之后alert信息，且不跳转代码块class LoinForm extends React.Component{ constructor(props) { super(props); //初始化状态 this.state={ pwd:'' } this.handleSubmit = this.handleSubmit.b原创 2020-12-16 16:40:20 · 166 阅读 · 0 评论 -
react（13）——旧版本生命周期函数四种调用生命周期函数的情况
react的生命周期方法调用顺序第一次初始化渲染显示：ReactDOM.render()constructor():创建对象初始化statecomponentWillMount():将要插入回调render():用于插入虚拟回调componentDidMount():已经插入回调每次更新state：this.setState()componentWillUpdate():将要更新回调render():更新（重新渲染）componentDidUpdate():已经更新回调移除组原创 2020-12-16 21:49:26 · 161 阅读 · 0 评论 -
react（14）——脚手架搭建
react脚手架是什么就是下载一个空的react项目，项目为我们配置了各种工具，以便于我们写代码搭建react脚手架下载create-react-app工具，输入cnpm install -g create-react-app即可cnpm比npm下载速度快一些，install是安装的意思，-g代表全局安装，create-react-app是工具名称使用下载好的create-react-app创建脚手架，输入create-react-app my_react即可create-react-app原创 2020-12-22 10:06:52 · 168 阅读 · 0 评论 -
react（15）——jsx里面怎么写注释
jsx中可以通过{/*注释内容*/}的方式写注释<script type="text/babel"> const VDOM = <div>jsx里面怎么写注释{/*这样写注释*/}</div> ReactDOM.render(VDOM,document.getElementById('test'))</script>原创 2021-01-20 21:32:13 · 1387 阅读 · 0 评论 -
react（16）——通过creatRef来创建ref标识
代码<div id="test"></div> <script type="text/babel"> 'use strict' class Demo extends React.Component{ myRef = React.createRef(); showDate=()=>{ alert(this.myRef.current.value); }原创 2021-01-20 22:00:53 · 492 阅读 · 0 评论 -
react（17）——useState钩子函数的用法清晰讲解
代码const [something, setSomething] = useState(false)讲解useState方法是一个react自带的钩子函数；something是由useState函数新创建的一个State；useState方法的参数作为新的State的值；setSomething是一个函数，用于以后更新这个State；例如：setSomething(true);//将something这个State更新为trueuseState方法会导致重新渲染；...原创 2021-01-24 17:26:12 · 1323 阅读 · 0 评论 -
react（18）——通过event.target获取标签结点
1.代码<body> <div id="test"></div> <script type="text/babel"> 'use strict' class Demo extends React.Component{ showButton=(event)=>{ console.log(event.target);原创 2021-01-30 10:11:22 · 2684 阅读 · 0 评论 -
react（19）——event的preventDefault方法阻止默认事件，实现提交表单，提示表单信息，不跳转页面
1.代码 <body> <div id="test"></div> <script type="text/babel"> "use strict"; class Login extends React.Component { handleSubmit=(event)=>{ event.preventDefault();//阻止默认事件 con原创 2021-01-30 10:37:44 · 1857 阅读 · 0 评论 -
react（20）——使用函数的柯里化实现获取表单的数据
1.概念高阶函数：如果一个函数符合下面2个规范中的任何一个，那么该函数就是高阶函数。一个函数接收的参数是一个函数。一个函数返回的值是一个函数。函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。2.代码<body> <div id="test"></div> <script type="text/babel"> "use strict"; class Login原创 2021-01-31 10:33:55 · 281 阅读 · 0 评论 -
react（21）——不使用函数柯里化功能实现表单验证
1.代码<body> <div id="test"></div> <script type="text/babel"> "use strict"; class Login extends React.Component { state = { username: "", password: "", }; saveFormData = (dataType,value)原创 2021-01-31 10:53:05 · 164 阅读 · 0 评论 -
react（22）——ReactDOM.unmountComponentAtNode()方法，卸载结点
1.代码<body> <div id="test"></div> <script type="text/babel"> "use strict"; class Life extends React.Component { death = () => { ReactDOM.unmountComponentAtNode(document.getElementById("tes原创 2021-02-03 13:10:25 · 6688 阅读 · 1 评论 -
react（23）——setInterval方法，react的componentDidMount生命周期方法
1.代码<body> <div id="test"></div> <script type="text/babel"> "use strict"; class Life extends React.Component { state = { opacity: 1 }; death = () => { ReactDOM.unmountComponentAtN原创 2021-02-03 13:29:02 · 496 阅读 · 0 评论 -
react（24）——新版本生命周期函数与旧版本对比
对比图1.即将废弃三个生命周期函数，但是也可以用componentWillMount、componentWillUpdate、componentWillReceiveProps这三个生命周期函数更改名字为：UNSAFE_componentWillMount、UNSAFE_componentWillUpdate、UNSAFE_componentWillReceiveProps（就是前面加上UNSAFE_）新版本生命周期函数也兼容老版本的命名，不过控制台会弹出warn警告，警告显示在以后的版本中（18原创 2021-02-04 13:51:42 · 231 阅读 · 1 评论 -
react（25）——新版本新增的生命周期函数getDerivedStateFromProps
1.代码static getDerivedStateFromProps(props,state){ console.log("getDerivedStateFromProps",props,state) return null}2.用法讲解需要在前面添加static，否则会有警告且不能使用可以获取props和state参数需要有返回值，且返回值为空或者一个state对象，当返回值为state对象时候，会更新state多用于子组件完全跟着props变化而变化的时候3.运行结果原创 2021-02-04 15:41:42 · 368 阅读 · 0 评论 -
react（26）——滚动条固定案例，新版本生命周期函数componentSnapshotBeforeUpdate
1.代码<!DOCTYPE html><html lang="en"> <head> <title>hello_react</title> <meta charset="UTF-8" /> <script type="text/javascript" src="../js/react.development.js"></script> <script ty原创 2021-02-04 17:12:34 · 268 阅读 · 0 评论 -
react（27）——diff算法；key有什么作用，为什么遍历列表时，key最好不要用index；
1.虚拟DOM中key的作用key是虚拟DOM对象的标识，在更新显示时key起着极其重要的作用。react会根据【新数据】生成【新的虚拟DOM】，随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较。如果虚拟DOM中找到了与新虚拟DOM相同的key，就比较其内容；如果内容没变，则直接使用之前的真实DOM如果内容变了，则生成新的真实DOM，然后替换掉页面中之前的真实DOM如果虚拟DOM中没有找到与新虚拟DOM相同的key，就直接创建新的真实DOM然后渲染到页面2.用ind原创 2021-02-05 12:06:32 · 510 阅读 · 0 评论 -
react（28）——react脚手架public目录下文件讲解
目录截图1.favicon.ico该文件是浏览器的图标文件，是一个图片2.index.html浏览器的主页面，react脚手架上只有一个html文件，页面的转换由转换组件完成<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <!-- 指向public目录下的favicom.ico文件，给该页面设置图标 --> <link原创 2021-02-09 12:08:40 · 2216 阅读 · 0 评论 -
react（29）——react脚手架src目录下文件讲解
src目录下文件截图1.App.cssApp.js的样式文件2.App.js一个App组件3.App.test.js一个app组件测试文件，基本不用，我们直接运行程序进行测试4.index.cssindex.js的样式文件5.index.js入口文件，该文件将app组件渲染进入index.html的root容器中6.logo.svg图片，App.js中的App组件会用到7.reportWebVitals.js实现页面上的性能监测，index.js文件会原创 2021-02-09 12:30:30 · 690 阅读 · 0 评论 -
react（30）——react脚手架文件讲解
脚手架文件截图1.build网上其他人的脚手架都没有这个build文件，这个文件到底是干什么的啊!!!求大佬评论区解惑2.node_modules里面放置一些依赖配置文件3.public可以参考这篇文章react——react脚手架public目录下文件讲解4.src可以参考这篇文章react——react脚手架src目录下文件讲解5.gitignoregit的选择性上传的配置文件6.package-lock.json锁定安装时的版本号，并且需要上传到git，以保证其他人再n原创 2021-02-09 12:54:16 · 279 阅读 · 0 评论 -
react（31）——使用脚手架写Hello页面
1.代码目录App.js代码import React from 'react'import Hello from './components/Hello/Hello'import Welcome from './components/Welcome/Welcome'const {Componet} = Reactclass App extends React.Component{ render(){ return( <div>原创 2021-02-16 14:37:46 · 291 阅读 · 0 评论 -
react（32）——通过事件获取松开的键盘按键event.keyCode
1.代码class App extends React.Component{ handleKeyUp=(event)=>{ console.log(event.target.value+":"+event.keyCode) } render(){ return( <div> <input onKeyUp={this.handleKeyUp}/>原创 2021-02-25 21:23:16 · 1016 阅读 · 0 评论 -
react（33）——在脚手架中引入axios，在package.json中配置“proxy“的作用
react在脚手架中如何引入axios在终端中进入该脚手架输入npm add axios 在想要使用axios的组件中import axios在react脚手架中配置proxy有什么作用使用脚手架react界面发送axios请求可能会遇到跨域问题。配置proxy，值为想要访问的服务器端口。在之后访问服务写URL地址时，可以直接写脚手架的地址。（1）如果脚手架中找到了该文件，则返回脚手架中的文件。（2）如果教授家中没有找到该文件，则去proxy所配置的路径中寻找文件，且能解决跨域的原创 2021-03-10 16:50:07 · 1463 阅读 · 0 评论 -
react（34）——react脚手架在src路径下创建setupProxy文件，在里面设置代理请求服务器
1.在src路径下创建爱你setupProxy.js文件2.在setupProxy.js文件中写代码const proxy = require("http-proxy-middleware");module.exports = function (app) { app.use( proxy("/api1", { target: "http://localhost:3000", changeOrigin: true, pathRewrite: { "^原创 2021-03-10 17:44:41 · 1414 阅读 · 0 评论 -
react（35）——消息订阅与发布技术，不再通过传递父类函数来进行数据传递了pubsub-js
1.代码appimport React, { Component } from 'react'import Div1 from './components/div1'import Div2 from './components/div2'export default class App extends Component { render() { return ( <div> <Div1/> <Div2/&原创 2021-03-11 22:14:53 · 180 阅读 · 0 评论 -
react（36）——使用fetch向服务器发送请求。
1.fetch是什么我们之前向服务器发送请求的方式无非就是ajax，jquery，axios。这三种方式都是通过包装XMLHttpRequest类来实现请求的。fetch是系统自带的一个类，也能够用于向服务器发送请求，且不涉及XMLHttpRequest类。fetch是基于promise实现的，学习需要promise功底。2.fetch使用fetch("http://localhost:3000/api1/posts") .then( (response) => {原创 2021-03-12 17:30:30 · 1049 阅读 · 0 评论 -
react（37）——router路由的入门
1.使用路由首先需要先安装路由react脚手架中不带有路由，要想使用路由功能，需要我们引入这个包，运行npm add react-router-dom。2.一个简单的路由程序代码app的代码import React, { Component } from "react";import Page1 from "./pages/page1"import Page2 from "./pages/page2"import { Link, BrowserRouter, Route} from "r原创 2021-03-15 20:38:21 · 123 阅读 · 0 评论 -
react（38）——route路由，Link标签的升级版NavLink
1.NavLink标签使用NavLInk标签相对于Link标签，多了一个选中添加css效果的能力当路径为NavLink标签的to属性时，NavLink标签的className属性会增添一个active的css。可以给NavLink标签添加一个activeClassName属性，当路径为NavLink标签的to属性时，NavLink标签的activeClassName将作为css效果激活。import React from 'react';import ReactDOM from 'react-原创 2021-03-15 21:01:33 · 303 阅读 · 0 评论 -
react（39）——children属性标签体，{...props}快速传递props属性
1.代码appimport React, { Component } from "react";import Div1 from "./components/div1"import { Link, BrowserRouter, Route, NavLink } from "react-router-dom";export default class App extends Component { render() { return ( <div>原创 2021-03-15 21:26:40 · 1164 阅读 · 0 评论