react
文章平均质量分 92
SakuraZr
我爱学习,学习使我快乐
展开
-
学习记录——hooks基本使用
学习于:https://blog.csdn.net/sinat_17775997/article/details/89087266react hooks官网Hooks 是一项新功能提案,可以在不编写类的情况下使用 state(状态) 和其他 React 功能。useStateimport React, { useState } from 'react';function Test() { const [count, setCount] = useState(0) const [转载 2020-12-27 20:21:45 · 184 阅读 · 0 评论 -
学习记录——redux模块拆分和redux-thunk
redux的模块拆分根据独立的模块可以拆分出单独的reducer合并reducer:redux自带的一个方法combineReducers,将拆分的reducer最后合并成一个大的reducerredux-thunk:可以在reducer进行异步操作 下载:npm i redux-thunk -Sstore/index.js:import { createStore, combineReducers, applyMiddleware } from 'redux'import thunkMi原创 2020-12-17 20:45:27 · 193 阅读 · 0 评论 -
学习记录——redux和组件结合
redux:管理项目中的状态三大原则单一数据源state是只读的使用纯函数来修改state (reducer)重要概念state:整个应用的状态action:描述如何修改state的对象,并且这个对象必须要有type属性reducer:修改state的纯函数,接收旧的state、action,返回新的statestore:使用action来描述“发生了什么”,和使用reducers来根据action更新state的用法。store就是把它们联系到一起的对象。一个redux应用只能有原创 2020-12-16 19:55:38 · 204 阅读 · 0 评论 -
学习记录——redux
本质上是一个单独的库,可以抽出来使用 也可以和react配合使用主要是管理项目中的状态下载:npm install redux -S什么时候使用你有着相当大量的、随时间变化的数据你的state需要有一个单一可靠数据来源你觉得把所有state放在最顶层组件中已经无法满足需要了使用初始化仓库:src/store/index.js//初始化仓库//1.导入一个方法 生成仓库实例import { createStore } from 'redux'//2. createStore要原创 2020-12-16 19:35:00 · 50 阅读 · 0 评论 -
学习记录——react-router-domt路由知识点
BrowserRouter:路由系统根节点,必须要有且只能有一个HashRouter:路由系统根节点,必须要有且只能有一个Switch:它的子元素只能是Route或者Redirect,功能是只匹配一个路由,只要匹配成功就不再继续匹配Route:路由与页面的一一对应关系 <Route path="/home" component={Home} /> <Route path="/detail" render={()=>Detail} />path:路径comp原创 2020-12-15 20:06:54 · 191 阅读 · 1 评论 -
学习记录——react路由封装
封装一个路由,以后我们再使用的时候,不用一个一个写Route那些,只需要调用自己写的方法,并且只需要改动一个文件引入需要的组件就可以了。views文件夹下新建router文件夹,里面新建RouterView.js和router.config.jsrouter.config.js配置路由需要的组件以及路径import Home from '../views/Home'import Find from '../views/Find'import Video from '../views/Video'原创 2020-12-15 19:41:34 · 550 阅读 · 1 评论 -
学习记录——react路由 react-router-dom基本使用
下载 npm install react-router-domBrowserRouter as Router:as关键字,用来给导入的变量设置新的名字BrowserRouter:最外层的组件,可以理解为一个容器,用来放Route、Link,里面只能有一个节点Switch:包裹Route,匹配与当前访问地址匹配的RouteRoute:用来匹配浏览器的路径Link:相当于a链接Redirect重定向,在输入的路径没有与之匹配的组件的时候,自动匹配Redirect标签里设置的组件Na.原创 2020-12-14 21:03:13 · 89 阅读 · 0 评论 -
学习记录——react生命周期
参考:https://www.jianshu.com/p/b331d0e4b398生命周期函数框架中提前设置好的在一些关键时刻会执行生命周期函数的逻辑需要我们自己编写实例期contructorcomponentWillMount:初始化数据 (相当于vue里的created) 过期render(仅仅产生虚拟dom)①render之后得到了一份虚拟dom②ReactDom.render()只有这个方法将虚拟dom转换成真实domcomponentDidMount:已经将虚拟dom原创 2020-12-11 19:53:52 · 64 阅读 · 0 评论 -
学习记录——react类似百度搜索的小练习(数据筛选)
先在state里模拟一个数据,用于搜索。然后写一个input框,添加onChange监听事件,当我们输入内容的时候,会自动去匹配数据,如果包含一样的字就显示出来。然后要做的是在input框输入值的同时,遍历listDog数组,看有没有输入的那个值。如果有的话,显示出包含那个值的所有元素,如果没有则返回一个空数组。默认刚打开页面是空的。可以先封装一个回调,注意在回调里的this的指向问题。可以写一个button来观察this知识点-改变this指向的三种方法方式1:把方法变成剪头函数 名.原创 2020-12-11 19:25:30 · 252 阅读 · 0 评论 -
学习记录——react的css模块化
css模块化css模块化,意味着每一个组件里面的样式都是独立的,互相不会影响的。比如在index里设置一个样式,在son再设置一个样式,它们的class类名都是一样的,那么直接写肯定是会相互影响的,就需要css模块化。然后到index.js里:随便给哪个元素加个className到index.css里随便写个样式:.active{ background-color: skyblue; }然后到Son.css里:写一个一样类名的样式.active{ background-原创 2020-12-11 19:09:36 · 220 阅读 · 0 评论 -
学习记录——react的跨级传值React.createContext
React里面的api:React.createContext (通过这个api完成跨级传值)里面有如下:Provider 外层 生产数据 (数据的生产者)Consumer 内层 消费数据 (数据的消费者)这两个都是组件作用:方便祖先组件与后代组件(中间隔了好多层组件)传值也就是通过React.createContext()创建一个Context对象,这个Context对象包含两个组件和< Consumer />...原创 2020-09-14 16:56:46 · 746 阅读 · 0 评论 -
学习记录——react组件实例
类组件内的成员可以访问this,this指的就是当前组件实例组件实例和组件的调用有关,每次调用组件的时候都会生成新的组件实例组件就是独立的存在组件实例上挂在了很多跟组件相关的属性和方法...原创 2020-09-09 11:43:09 · 186 阅读 · 0 评论 -
学习记录——react组件内部的状态state、setState
类组件内部都会有相关的状态,通过改变状态就可以更新视图 类比vue中的data写法:state = {show: true}//es7写法 类似vue中的data写法 state = { show: true }通过组件实例就可以获取到组件状态 this.state.show改变状态让视图更新我们应该使用组件实例上的方法 setState去改变组件状态注意:state有多个状态的时候 改变其中一个状态别的状态不会受影响 会合并如果setState放在同.原创 2020-09-09 11:28:14 · 337 阅读 · 0 评论 -
学习记录——react受控组件和非受控组件,操作dom( React.createRef())
受控组件和非受控组件受控组件:主要应用于表单元素。受控值得是表单中的值,和状态绑定有受控组件,也有非受控组件。非受控的意思是表单的值不与状态绑定受控组件通过受控方式取值,可以实时的去拿,就像vue里的v-model,可以动态获取值。前提是,input框里的值要绑定到state里去。打开页面查看:非受控在react中,我们可以通过ref来获取dom元素用法:在需要获取的dom元素标签中使用ref=’xxx’使用this.refs.xxx就可以获取到这个dom元素了打开浏览器查看:如果原创 2020-09-08 15:05:45 · 274 阅读 · 0 评论 -
学习记录——react传入模板(children)
传入模板(children)在组件中间写要传入的虚拟dom在子组件中展示 {this.props.children}比如想要传递一段代码到子组件里。父组件Home.js:子组件Children3.js:接受父组件里的代码,使用 this.props.children...原创 2020-09-07 11:44:54 · 262 阅读 · 0 评论 -
学习记录——react的子父传值
react的子父传值和vue一样,在父组件中定义一个回调,在子组件中触发这个回调比如子组件中有一个班button按钮,当我们点击这个按钮的时候会传一个值到父组件里**父组件Home.js:**首先在父组件定义一个回调回调函数里有一个形参,接收的就是子组件传过来的值子组件Children2.js:总结:父组件传递一个函数子组件内部接收(props)并触发该函数达到传值目的注意:props不可被修改!...原创 2020-09-07 11:34:38 · 125 阅读 · 0 评论 -
学习记录——react的父子传值
react的父子传值、子父传值父传子:利用props 组件的属性(后面 redux 仓库也是使用props去处理数据)父组件Home.js引入子组件 ,并将父组件想要传的数据绑定给子组件子组件children.js原创 2020-09-07 10:49:04 · 67 阅读 · 0 评论 -
学习记录——react组件和环境搭建
react组件和环境搭建使用脚手架搭建开发环境npm install create-react-app -g 下载全局的脚手架create-create-app -V 查看版本号create-react-app project(项目名字) 创建项目下载完后会有一个project文件夹,里面的结构目录如下:进入project项目文件后,执行npm run eject可以暴露出react的相关配置文件npm start启动项目react中的组件函数式组件创建的时候声明一个函数必须返原创 2020-09-04 12:19:17 · 240 阅读 · 0 评论 -
学习记录——认识react及基本使用、jsx
认识react及基本使用合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:全新的界面设计 ,将会带来全新的写作体验;在创作中心设置你喜爱的代码高亮样式,Markdown 将代码片显示选择的高亮样式 进行展示;增加了 图片拖拽 功能,你可以将本地的图片直接拖拽到编辑区域直接展示;全新的 KaTeX数学公式 语法;增加了支原创 2020-09-04 11:34:29 · 158 阅读 · 0 评论