react基础
文章平均质量分 51
语法
不能懒鸭
努力写出优雅的代码
展开
-
ES6 generator函数与yield的理解、及在react项目中的使用
1. yield是什么yield是ES6的新关键字,使生成器函数执行暂停,将其后面的表达式的值以对象的形式返回。可以理解为生成器函数专有的return关键字。yield关键字实际返回的是一个迭代器对象,{value:返回值,done:是否完成}yield无法单独工作,需要配合generator(生成器)的其他函数,如next。先来个简单的例子:function* saleCount(){ var saleList = [1,5,9] for (var i原创 2022-03-10 17:32:50 · 4067 阅读 · 1 评论 -
react路由使用、相关概念
1. 对SPA的理解单页面web应用(single page web application,SPA)整个应用只有一个完整的页面点击页面中的链接不会刷新页面,只会做页面的局部更新2.路由的理解1.什么是路由一个路由就是一个映射关系(key:value)key为路径,value可能是function或component2.路由的分类前端路由用来展示页面内容注册路由:<Route path="/login" component={Login当浏览器的path变为/lo原创 2022-03-09 21:24:32 · 124 阅读 · 0 评论 -
react中关于组件的一些概念(有无状态组件、组件封装与继承 、高阶组件)
怎么理解“在react中,一切皆为组件 ” 句话react采用组件化的思想,最小的组件单位就是原生HTML元素,采用JSX语法组件声明调用react的虚拟dom,就是一个大的组件树,从父组件层到子组件,在react-router v4版开始,路由本身也是组件各个库提供的hoc返回也是组件,如withRouter、connectreact中的基础数据state props的传递也是以组件为基础1. 什么是组件?组件就是页面上的一部分,可以是一个按钮、一张图片,可以是任意一个html元素。2.原创 2022-03-08 22:08:35 · 657 阅读 · 0 评论 -
Real DOM 和 Virtual DOM含义、区别、优缺点
1. 含义1. Real DOM :(真实的DOM) 在页面渲染出的每个节点都是一个真实的DOM结构,比如:<div class="root"> <h1>hello Real </h1></div>2. Virtual DOM:(虚拟dom,本质是以js对象形式存在的,对DOM的描述)Virtual DOM 是一个轻量级的js对象,它最初只是real DOM的副本,也是一个节点树,它将元素、它们的属性和内容作为该对象及其属性。Virtu原创 2022-03-06 21:02:01 · 1326 阅读 · 0 评论 -
react中受控组件与非受控组件
在HTML中,表单元素(如:input textarea select通常自己维护state,并根据用户输入进行更新。而在react中,可变状态通常保存在组件的state属性中,并且只能通过使用setState()来更新。1. 受控組件 react官网简述:https://zh-hans.reactjs.org/docs/forms.html#controlled-components每当输入框内容发生变化时,都会被写入组件的state中,这种组件在react中别理解为 受控组件原创 2022-03-05 23:05:36 · 570 阅读 · 0 评论 -
react 对传入属性props类型、必填限制及默认值设置
import React, { Component } from 'react'import PropTypes from 'prop-types' // 1.引入prop-typesexport default class Child extends Component { // 2.给类本身添加属性propTypes、defaultProps(用static) static propTypes={//类型、必填限制 name:PropTypes.string.is.原创 2021-12-01 14:44:14 · 1112 阅读 · 0 评论 -
react中 antd样式按需要引入
第一步:安装yarn add react-app-rewired customize-cra 或者npm i react-app-rewired customize-cra第二步:修改package.json"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "..原创 2021-12-13 17:44:05 · 694 阅读 · 0 评论 -
07、react 组件注册
// 注册组件! // 分类: // 构造函数式组件! /* function 组件名(){ return JSX } let 组件名 = ()=>(JSX) */ // 类组件! /* class .原创 2022-02-14 11:04:57 · 909 阅读 · 0 评论 -
06、react列表渲染
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>06、列表渲染</title> <!--1、 引入react --> <script src="./js/react.development.js"></script> <!--2、 引入react-dom -->原创 2022-02-14 11:04:44 · 56 阅读 · 0 评论 -
05、react 条件渲染
不像vue 那样有 v-if v-show 指令,需要自己判断<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>05、条件渲染</title> <!--1、 引入react --> <script src="./js/react.development.js"></script&原创 2022-02-14 11:04:31 · 72 阅读 · 0 评论 -
04、react 样式处理
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>04、样式处理</title> <!--1、 引入react --> <script src="./js/react.development.js"></script> <!--2、 引入react-dom --&g原创 2022-02-14 11:04:18 · 117 阅读 · 0 评论 -
03、react JSX语法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>03、JSX语法</title> <!--1、 引入react --> <script src="./js/react.development.js"></script> <!--2、 引入react-dom --&g原创 2022-02-14 11:04:04 · 116 阅读 · 0 评论 -
08、react 组件的实例的三大重要的属性 state props refs
state状态机: 讨论组件的data数据! 叫做state!注意:只有类组件有状态机,函数组件没有!class LiComponent extends React.Component{ state={isHot:true} //1、定义state changeWeather=()=>{ //利用箭头函数的this指向 this.setState({isHot:!isHot}) //3、修改state需要借助特定的api setState,不能通过thi原创 2022-01-07 16:36:54 · 260 阅读 · 0 评论 -
【react-redux】的基本使用
react-redux 原理图UI组件不直接使用redux通过在外层再套一个容器组件,这个容器组件是核心,可以使用reducx的任何api然后把状态state,操作状态的方法 传给UI组件复习一下redux原理:1. redux文件夹1. constant.js2. actions.js3. store.js4. reducer.js2. index.js 入口文件3. App.jsx 整个应用的容器组件react-redux基本使用:1. contain原创 2022-01-09 21:46:07 · 410 阅读 · 0 评论 -
react-redux 容器组件container.jsx 代码优化
未优化的container.jsx//1引入UI组件import CountUI from '../../componnets/CountUI'//2引入connect 用于连接UI与reduximport {connect} from 'react-redux'//3引入actionimport {createIncrementAction} from '../../redux/action'function mapStateToProps(state){ return { count原创 2022-02-14 11:01:58 · 260 阅读 · 0 评论