React
Wanjun1772
代码搬运工
展开
-
Redux介绍
Redux 是一个面向JavaScript应用的可预测状态容器,其实就是一个状态容器用来存储状态;统一管理和维护组件中可变的数据或状态,相当于一个集中存储箱,把我们对应的数据和状态放到里面去,通过方法连接这个盒子进行取值;将某些数据统一的管理到一个存储里面去,谁需要的话连接我给你就行了Redux的工作模式:需要使用Redux的情况:1.2.React中数据只能向下走,不能向上回溯...原创 2020-03-07 10:57:30 · 191 阅读 · 0 评论 -
React-生命周期钩子函数(有状态)
生命周期在很多框架中都有体现:有状态组件才会拥有生命周期这么一个说法:生命周期钩子函数只针对有状态的组件,在整个生命周期中有多少个钩子函数呢,如下图所示:这些函数有的只运行一次,有的在整个项目当中持续的运行,比较重要的钩子函数(组件创建的时候会使用的,渲染完成之后还会使用其他的钩子函数):constructor()函数:1.首先constructor()构造函数执行,可以在里面设...原创 2020-03-06 23:08:27 · 452 阅读 · 0 评论 -
有状态组件和无状态组件的区别
有状态组件就是一个类,无状态组件是一个函数;区别:1.(是否拥有state)有状态组件可以使用状态:state,无状态组件不能使用state;只有继承component这个组件它才能拥有state进行一些数据的存储和管理,仍然可以拥有props;2.(生命周期)如果是有状态组件的话那么你就会拥有生命周期函数,无状态组件就不用有生命周期函数,因为数据的更改都是通过状态进行更改。使用props进...原创 2020-03-06 20:09:10 · 5961 阅读 · 1 评论 -
React-动态修改样式和添加类名
要求:点击<button>展示内容和隐藏内容有不同的背景颜色;首先在默认的时候即没有展示的时候拥有一个样式:下来展示内容的时候更改button的样式接下来动态地添加类名(原因:不会将所有样式写在行间,因为行间样式作用范围比较小):希望1这个类名没有在上面创建一个:接下来red类,bold类在App.css当中定义在某种条件下发生变化:如果展示的组件小于等于2个...原创 2020-03-05 12:17:07 · 4667 阅读 · 0 评论 -
React-使用循环并实现删除和修改
在React当中如何使用for循环对当前的数据进行遍历:这4个组件是自己一个个写进来的,因该根据数据的多少遍历出来对应的一个结果:例如:遍历Persons时应该给我们返回一个对应的组件,而不是有一个写一个在React中遍历需要使用正常的js语法(对应的逻辑要写在花括号里面)解决此问题:添加key值属性,key里面必须有独一的标识这样就给每一个元素标出了key值;既然现在有用了...原创 2020-03-04 22:21:23 · 2094 阅读 · 0 评论 -
React-使用分支if
任务是:点击1处,2处就显示出来,再点击就收回去,这个时候就需要用到一个分支开关首先拥有一个状态来控制2是否展示;React中实现分支即点击<button>改变showPersons这个状态,然后刷新下面<div>的方法:将`包含在中括号里面 ,因为如果在中括号里面,代表可以在里面可以写逻辑了;不使用if-else的形式,使用三目运算符的方法;接下来修改&...原创 2020-03-04 20:07:02 · 348 阅读 · 0 评论 -
React-组件样式的2种方式
如何在React当中使用样式?有2种形式1.跟脚手架展示的样式是一样的,比如定义App.js使用对应样式的话比如使用的是App.css,如果想把App.css的样式正确的读取出来,需要在App.js中引入它写一个单独的样式文件引入完成之后,就可以在App.js中使用App.css样式了;需要在每个组件当中再创建一些对应的CSS文件与其匹配,而不是在index.html当中写对应的内容;...原创 2020-03-04 12:07:36 · 674 阅读 · 0 评论 -
React-双向数据绑定
在React当中实现双向数据绑定需要借助对应的标签<text><select>或`,也就是可以输入的内容;想要使文本框的输入内容修改上面的内容,则应该给当前的input标签添加事件,这个事件能够触发父级组件的一个事件方法,在父级组件的事件方法中更改当前的状态,并且拿到文本框输入的内容就OK了,person.js中的chang属性(方法)要在负组件中定义;onCha...原创 2020-03-03 22:03:14 · 323 阅读 · 0 评论 -
React-属性传值(传事件)
1.给事件传递一个参数2.使用属性传值传递一个函数原创 2020-02-27 19:38:44 · 699 阅读 · 0 评论 -
React-state状态的使用
属性更多是用于组件之间的通信,比如在上个博客里,父组件App.js想要传递一些数据给子组件Person.js的时候就会使用到属性,而且我们不会对属性进行改变,而state不一样,它不是用来传值的,而是改变这个值的状态。state的使用:state只能在类当中使用,不能在函数当中使用想要修改这2个值,就要使用state,想要修改内容,就不能像上述一样写死在字符串里面了,而是通过触发一个事件取...原创 2020-02-27 00:23:06 · 1066 阅读 · 0 评论 -
React-组件通信(属性传值)
属性:参数实参:在调用这个组件的组件里面,在调用过程中给出,如下图:给子组件里面传递过去2个属性子组件的接收方式:其中1处的参数名字随意起,因为是形参,但是通常都写为props(因为知道我们接收的是一个属性),真正传递的是上图的实参。在接受的时候只有一个形参作为属性来接收调用组件传来的属性如何获取调用组件双标签里面的内容:方法是:形参.children(拿到首尾标签中间的内容)调整...原创 2020-02-26 21:45:16 · 930 阅读 · 0 评论 -
React组件
使用组件开发的原因:让代码变得更加清晰,不冗余,让代码处于一个低耦合的状态,所以框架里面提供的方法就是使用组件式进行开发,在React当中想要用组件的话无非就是创建js文件,然后把当前的js文件作为整个项目的小功能的一部分,然后将整个项目的小功能集合到当前的根组件里面,或者集成到其他组件里面去,然后就可以通过很多的小功能完成一个完整的项目。页面当中其实展示的就是下面代码块里面的内容:新写的组...原创 2020-02-26 17:53:56 · 151 阅读 · 0 评论 -
初识React
视频资源:https://www.bilibili.com/video/av41078135?p=2启动一个react项目:先安装node.js然后进入控制台:安装全局react:npm install -g create-react-app创建一个react项目:先进入要放入项目的文件夹,然后在控制台输入:create-react-app 项目名字然后cd到新建的项目里面,然后输入n...原创 2020-02-26 16:58:20 · 218 阅读 · 0 评论