React 笔记 非原创
weixin_43297321
这个作者很懒,什么都没留下…
展开
-
React note14(hook&typescript初体验&ts与react&Ant Design)
HookHookReact Hooks是React 16.8.0版本推出的新特性 主要的作用就是让无状态组件 可以使用状态(在react开发中状态的管理是必不可少的 以前为了进行状态管理需要使用类组件或者redux等来管理)useState()就是React提供最基础、最常用的Hook,主要用来定义和管理本地状态。useState返回的是一个数组(长度为2),数组的第一个对象表示当前状态的值,第二个对象表示用于更改状态的函数,类似于类组件的setState。let [val(当前状态的值),s原创 2020-08-31 16:40:45 · 404 阅读 · 0 评论 -
React note13(immutable不可变对象&在react中使用immutable&在redux中使用immutable)
immutable不可变对象immutable介绍Facebook 工程师使用3年时间打造,与React同期出现,但是没有被默认放到React工具集中。它内部实现了一套完整的数据持久化,里面有很多常见的数据类型Collection List Map Set等。里面有三种重要的数据结构:Map: 键值对集合,对应于Object Es6中也有专门的Map对象 。List: 有序可以重复的列表,对应于Array 。Set: 无序并且不可重复key的数组 。参考:https://segme原创 2020-08-31 16:40:13 · 286 阅读 · 0 评论 -
React note12(脚手架:路由&路由跳转&withRouter&路由传参&路由render渲染&路由验证&路由钩子&路由懒加载)
得到原创 2020-08-31 16:39:29 · 360 阅读 · 0 评论 -
React note11(脚手架:ReactAjax(axios 、ajax 、fetch )&json-server&代理跨域&弹射 eject)
ReactAjaxReact ajaxajax可以放在 componentDidMount方法中的代码,是在组件已经完全挂载到网页上才会调用被执行,所以可以保证数据的加载。此外,在这方法中调用setState方法,会触发重新渲染。所以,官方设计这个方法就是用来加载外部数据用的在react16.0以后,componentWillMount可能会被执行多次。所以最好不要在此钩子中请求React本身没有独有的获取数据的方式。(使用原生或者第三方的方式)React 组件的数据可以通过 component原创 2020-08-31 16:37:57 · 198 阅读 · 0 评论 -
React note10(脚手架:redux&react-redux&高阶组件HOC)
redux思考如果组件A与组件B向互相传递参数那么就必须有一个共同的父组件 通过绑定到父组件的state 在进行分发给两个子组件redux是什么Redux是为javascript应用程序提供一个状态管理工具集中的管理react中多个组件的状态redux是专门作状态管理的js库(不是react插件库可以用在其他js框架中例如vue,但是基本用在react中)什么时候用redux需求场景:某个组件的状态需要共享的时候某个组件的状态需要在任何地方都可以拿到一个组件需要改变全局状态一个原创 2020-08-31 16:33:50 · 221 阅读 · 0 评论 -
React note9(脚手架:性能优化&react脚手架端口&项目如何启动&避开eslint语法检查)
性能优化写个例子–勾选变色–不看PPT传统的写法,会造成极大的损耗只是为了完成勾选变色的功能,用了正传,逆传,很麻烦check1import React, { Component } from 'react'import Check2 from "./check2.jsx"export default class check2 extends Component { constructor(props){ super(props) this.stat原创 2020-08-31 16:32:34 · 364 阅读 · 0 评论 -
React note8(脚手架:组件传值&跨组件传值context上下文对象&条件/循环渲染&ref)
组件传值(一)正向传值—使用props正向传值,父组件向子组件传值,通过props来传递。但是注意:props的值是不能修改的,如果想修改的话,配合state使用,通过state来修改值。props正向传值小栗子:父组件在传值的时候有两种方式:(1)直接在调用的子组件里面传值—直接传值;(2)通过ES6扩展运算符给子组件传值—ES6扩展运算符传值。子组件在接收父组件传过来的数据时也有两种方式:(1)直接this.props.xxx ;(2)解构赋值 let {demo1,demo2,原创 2020-08-31 16:31:45 · 270 阅读 · 0 评论 -
React note7(脚手架:this.props.children&state&属性传值&强制刷新&)
this.props.childrenthis.props.xxx,对象的属性与组件的属性是一一对应的,但是有一个例外this.props.children属性,它表示组件的所有子节点。this.props.children的值有三种可能:1、如果当前组件没有子节点,它就是undefined;2、如果有一个子节点,数据类型是Object;3、如果有多个子节点,数据类型就是array。现在来思考一个问题:如果在组件调用的开标签和关标签之中写入内容是否会渲染呢?如果什么都不做,肯定不能渲染。不原创 2020-08-31 16:30:53 · 370 阅读 · 0 评论 -
React note6(脚手架:简介&环境搭建&基础语法&styled-components)
React应用-脚手架为什么要使用脚手架在企业级开发中是没有人使用传统引用的方式来进行项目开发的使用npm安装各种插件非常方便的可以进行项目的开发与运行React脚手架分类常用的脚手架工具有如下几个create-react-app 是facebook官方开发React脚手架使用create-react-app安装npm install -g create-react-app 安装脚手架create-react-app --version 查看版本create-react-app 项原创 2020-08-31 16:29:59 · 165 阅读 · 0 评论 -
React note5(条件渲染&状态提升&todolist)
React条件渲染条件渲染开发中,创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。React 中的条件渲染和 JavaScript 中的一致,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI。条件渲染-if 语句在React中使用if语句条件渲染是最简单的,但是注意jsx中不允许有if条件渲染-三目运算符条件渲染的另一种方法是使用 JavaScript 的条件运算符:条件渲染-原创 2020-08-31 16:29:28 · 81 阅读 · 0 评论 -
React note4(State&受控组件&ref&组件生命周期&事件&this的绑定)
思考?使用props传递的值不能动态修改。那么怎么根据用户操作、网络响应、或者其他状态变化,使组件动态的响应并改变组件的输出。State 状态机状态机在react中开发者只需要关心数据。数据改变页面就会发生改变数据等同于状态。状态改变-页面绑定的数据就由react进行改变组件被称之为“状态机”,视图与状态一一对应使用–初始化状态使用状态必须先初始化:this.state={}constructor–superES6的继承规则得知,不管子类写不写constructor,在new实例的过原创 2020-08-31 16:28:30 · 150 阅读 · 0 评论 -
React note3(map列表渲染&元素重新渲染&遍历对象&函数组件&class组件&props&模块化与组件化)
React列表渲染在实际应用中, 数据展示 是最基本的功能 。1、React中使用 map() 进行列表的渲染。react中遍历列表用 map ,记得给每一次添加的内容加上唯一标识,就是把key值插进去。 下面提出了三种方法,建议第二种,层次感高,代码复杂度低。<div id="demoSky"></div><script type="text/babel"> let arr = ["galen", "sen", "uu", "lll"]原创 2020-08-31 16:27:38 · 2584 阅读 · 0 评论 -
React note2(基础开发环境搭建&使用JSX编写&react常用语法逻辑)
React简介什么是 React ?React 起源于 FacebookReact 是一个用于构建用户界面的 javascript 库。React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。React 开发背景Facebook 需要解决的问题:构建数据不断变化的大型应用。(数据变化会造成以下两点的问题,React的解决方案是什么呢)虚拟Dom—快减少更新次数 减少更新区域虚拟dom相当于在js和真实dom中间加了一个缓存。基于React进行开发时所有的DOM构造都原创 2020-08-31 16:25:42 · 160 阅读 · 0 评论 -
React note1(简介)
(一)什么是 React ?React 起源于 Facebook, 是一个用于构建用户界面的 javascript 库。React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。(二)React 开发背景React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。Facebook 需要解决的问题:构建数据原创 2020-08-31 16:22:39 · 106 阅读 · 0 评论