![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端学习之React
文章平均质量分 56
crystal_iwwish
多读书 多看日出
展开
-
在虚拟DOM和Diff算法中为什么不建议使用index作为key值?
key是什么key是虚拟DOM的一个重要标识,在DIff算法中,key对我们的性能也有着至关重要到的作用,有key就可以优化Diff算法,提高渲染性能;key在页面更新的时候做了什么1、首先,当我们进行一个页面更新,比如说新添加了一行数据,此时我们会生成一个新的DOM树;2、通过key值,定位到两个DOM树节点所在位置;(1)如果两个DOM树内容比对,没发生变化,我们直接使用原来的真实DOM(2)如果新旧DOM树节点发生了变化就替换掉之前旧的虚拟DOM,生成新的真实DOM(3)如果没找到同样原创 2022-03-04 17:03:44 · 569 阅读 · 4 评论 -
React入门基础+练习(二)
文章目录一、组件创建1.1 函数组件1.2 类组件二、组件区别2.1 有状态和无状态组件2.2 类组件的状态三、事件处理*3.1 注册事件**3.2 事件对象**3.3 this指向问题*四、setState修改状态五、表单处理*5.1 非控组件**5.2 受控组件*一、组件创建组件创建有两种:一种是函数组件、一种是类组件1.1 函数组件函数组件就是使用JS的函数或者箭头函数创建的组件函数组件创建:// 普通构造函数function Hello() { return <div>原创 2022-02-15 09:31:12 · 524 阅读 · 1 评论 -
React入门基础+练习 (一)
文章目录一、关于react1.1 react相关文档1.2 react是什么?1.3 react的特点?二、react的脚手架三、react元素的创建练习四、JSX4.1 JSX是什么4.2 JSX的使用4.3 JSX中使用JavaScript表达式*4.3.1 可以访问对象的属性**4.3.2 可以访问数组下标**4.3.3 可以调用方法**4.3.4 可以使用三元表达式*4.4 条件渲染4.4.1 if/else4.4.2 三元表达式4.4.3 &&运算符4.3 JSX注意事项原创 2022-02-13 16:59:19 · 981 阅读 · 0 评论 -
React-hooks
useStateuseEffect原创 2022-02-08 11:16:10 · 409 阅读 · 0 评论 -
React-组件生命周期
只有 类组件 才有生命周期挂载阶段:componentDidMount执行时机:组件创建时(页面加载时)更新阶段:componentDidUpdate执行时机:setState()forceUpdate() 强制组件更新组件接收到新的props(实际上,只需要父组件更新,子组件就会重新渲染)卸载阶段:componentWillUnmount执行时机:组件从页面中消失...原创 2022-02-08 10:39:44 · 176 阅读 · 0 评论 -
React-组件通信
父传子props基本使用import React, { Component } from 'react'class APP extends Component { render() { return ( <div> <h1>父子通讯——父组件</h1> <hr /> <Fn /> <Child /> </div>原创 2022-01-28 15:30:30 · 1216 阅读 · 0 评论 -
React-表单处理(受控组件,非受控组件)
受控和非受控组件原创 2022-01-27 16:54:28 · 674 阅读 · 0 评论 -
React-setState修改状态
由于react状态不可变,所以在react中不要直接修改 state 中的值,这是无效的!例如:语法:this.setState({ 要修改的部分数据 })setState() 作用:1 修改 state 2 更新 UI例如:setState 是哪来的?从 Component 父类继承过来的// 只要是数组中直接修改当前数组的方法都不能用!this.state.list.push(123) // 错误// 正确this.setState({ list: [...this.原创 2022-01-27 15:48:26 · 1078 阅读 · 2 评论 -
React-组件基础
创建组件,事件处理原创 2022-01-26 16:57:51 · 343 阅读 · 0 评论 -
React-概念和基本使用
什么是react一个用于构建用户界面的JavaScript库react三个特点声明式组件化跨平台react 脚手架的使用创建:npx create-react-app 文件名启动:npm startreact基本使用导入react和react-dom创建react元素(虚拟DOM)渲染react元素到页面中核心代码:// 导入react和react-domimport React from 'react'import ReactDOM from 'react-dom'原创 2022-01-24 20:27:25 · 63 阅读 · 0 评论