正文

react学习笔记2之正确使用状态

向着太阳生  向着太阳生  2022-10-01  745

关键词：

//状态不要直接修改，比如:

// 错的，这样写不会重新渲染组件
this.state.comment = ‘Hello‘;

//修改状态正确的方式
this.setState({comment:‘Hello‘});

setState方法的参数可以接受一个对象，也可以接受一个回调函数，状态的修改可能是异步的，所以当你修改的状态需要依赖状态本身或者props的值的时候，不要用上面的方式，而是传递一个方法，比如:

//假如组件有这样一个状态 this.state = {count:0};
this.setState((prevState,props) =>({count:prevState.count + props.num}))

//当setState的参数是回调函数的时候，它接受两个参数，第一个是组件的上一个状态对象，第二个是组件的props对象

//组件可以将状态作为属性传递给子组件
<Demo message={this.state.comment} />

//状态只能定义在construtor构造函数里面

react学习笔记总结(代码片段)

文章目录1.React之props的使用2.React之对props进行限制3.React之props只读(知道修改在这是什么效果！)4.React之props简写方式5.类式组件中的构造器与props的注意事项6.函数式组件使用props7.类式组件字符串形式的refs属性8.React之回调形... 查看详情

react学习笔记总结(代码片段)

react之redux的学习笔记

主流的数据框架：Flux （单向数据量，比较重大，实用性不强）reFluxredux（简单单一状态树）mvcmodel:数据view:显示controller:管理（action）npminstallreact-reduxredux 查看详情

react.js学习笔记之事件系统

事件系统React标准化了事件对象，因此在不同的浏览器中都会有相同的属性。组件createClass后创建的是许多方法组成的对象。组件中使用的方法分为React自有的方法与用户定义的方法。其中React自有方法是组件生命周期中的方法，... 查看详情

react学习笔记总结(代码片段)

文章目录1.React简介2.React的核心工具库3.实现一个React的实例4.React两种创建虚拟DOM的方式5.虚拟DOM与真实DOM的对比6.jsx语法规则7.jsx实战练习8.React开发者工具安装9.React函数式组件10.js的类相关知识11.React类式组件12.组件实例对象的... 查看详情

react学习笔记总结(代码片段)

针对React拓展相关的学习。文章目录一.React项目打包二.React扩展之setState两种写法三.React扩展之lazyLoad(懒加载)四、React的stateHook五、React的EffectHook六、React的RefHook七、React的Fragment八、React的Context九、React的PureComponent1.Component组件... 查看详情

react学习笔记总结(代码片段)

文章目录1.redux介绍2.redux工作流程3.redux的使用4.redux完整结构补充5.redux的异步action6.react-redux库与redux库7.react-redux库的实战8.react-redux的connect最精简写法9.react-redux的Provider组件作用10.react-redux整合UI组件和容器组件11.redux的combineReduce... 查看详情

react学习笔记总结(代码片段)

react学习笔记1

前端学习笔记今天开始学习react.js特开这一篇随笔作为react的学习笔记，主要记录看到的重点内容和自己的心得感想：一.基本组件和方法1.reactjs引入了一个虚dom的概念，对于每一个dom点都会存在一个状态，如果这个dom上的属性发... 查看详情

react学习笔记之环境配置

　　　今天开始学习react环境配置，首先我们知道目前主流框架有三个，即:angular,react,vue,每个框架都有大量粉丝在用，并且每个框架都有自己的一套开发环境和提供的脚手架，今天我们学习一下react环境配置，为后续课程学习打... 查看详情

react系统学习2（组件三大核心属性之state）(代码片段)

之前简单学习的react中函数式组件和类式组件的基本使用，函数式组件适用于定义简单的组件，类式组件适用于定义复杂的组件。复杂的组件指的是有状态的组件，所谓的状态，在react中就是三大核心属性之一的sta... 查看详情

vue学习笔记之-起步篇：vue与reactangular的区别

...是现在比较火的前端框架。这几个框架都各有所长，选择学习哪种就得看个人喜好或者实际项目了。相比之下， Vue是轻量级且容易学习掌握的。1、Vue和React相似之处都使用虚拟DOM提供了响应式（Reactive）和组件化（Composable）... 查看详情

#yyds干货盘点react笔记之学习之事件

...一定很酷微信公众号前端小歌谣关注公众号带你进入前端学习交流群react事件案例代码constApp=()=>constclickHandler=(event)=>event.preventDefault();//取消默认行为event.stopPropagation();//取消事件的冒泡alert(我是App中的clickHandler！);/**在React... 查看详情

react学习笔记——组件通信与状态管理hooksreduxmobe(代码片段)

react管理状态的工具：1、利用hooks进行状态管理；2、利用Redux进行状态管理，这种方式的配套工具比较齐全，可以自定义各种中间件；3、利用Mobx进行状态管理，它通过透明的函数响应式编程使得状态管理变得简单和可扩展。2013... 查看详情

学习react笔记四（hooks）(代码片段)

一、使用hooks因为函数组件是无状态的所以react提供了Hooks能够把把函数组件变成有状态的组件（提供state）在Reactv16.8之前：class组件（提供状态）+函数组件（展示内容）Reactv16.8及其以后：1.class... 查看详情

学习react笔记四（hooks）(代码片段)

react学习笔记-4-什么是生命周期

什么是声明周期？组件本质上就是状态机，输入确定，输出一定确定。如何理解这一点？react有两个特点，第一个就是去除了所有的手动dom操作，也就是使用jsx。第二个就是组件把状态和结果一一对应起来，从而能够直观的看出... 查看详情