React学习笔记
学习react过程中的整理的笔记
呀呀音
吃好喝好,长生不老
展开
-
React学习(五)——React Hooks(一)
一、React Hooks简介React Hooks就是用函数的形式代替原来的继承类的形式,并且使用预函数的形式管理state,有Hooks可以不再使用类的形式定义组件了。与原始写法对比: 二、useStateuseState是react自带的一个hook函数,它的作用是用来声明状态变量。1、useState的声明useState这个函数接收的参数是状态的初始值,它返回一个数组。const [ count , setCount ] = useState(0);// 声明一个count原创 2020-12-10 22:17:44 · 357 阅读 · 0 评论 -
React学习(四)——redux(二)TodoList制作demo体验redux流程
1、获取store中的值在开始demo之前,我们先来复习一下,如何获取store中存储的数据1、在reducer.js文件中const defaultState = { inputValue : '我是store中的默认值',}我们有一个默认值,在别的地方获取时,有两个步骤:(1)、引入store文件import store from './store/index'(2)、使用store.getState()即可拿到所有的store文件,然后通过.key的方式就可以拿到需要的数据原创 2020-12-10 21:13:01 · 162 阅读 · 0 评论 -
React学习(三)——redux(一)安装与创建仓库
1、安装npm install --save redux// oryarn add redux2、创建仓库store是唯一的只有store能够改变自己的内容Reducer必须是纯函数 (纯函数:给固定的输入,就一定会有固定的输出,而且不会有任何副作用)1、在src目录下创建一个store文件夹,然后在文件夹下创建一个index.js文件。index.js就是整个项目的store文件。// src\store\index.jsimport { createStore } from原创 2020-12-08 22:02:32 · 239 阅读 · 0 评论 -
React学习(二)——React Router学习
1、安装npm install --save react-router-dom// oryarn add react-router-dom2、基本使用<Route path="/" exact component={Index} /><Route path="/list/" component={List} />exact的意思是精确匹配:路径信息要完全匹配成功,才可以实现跳转,匹配一部分是不行的3、路由上动态传值使用场景,列表页跳转到详情页的时候需要携带id原创 2020-12-08 19:13:06 · 119 阅读 · 0 评论 -
React 学习(一)——组件间传值
1、父组件向子组件传值子组件使用props接收父组件内:<Child fatherName={this.state.name}/>子组件内:constructor(props) { super(props);}render() { return ( <div>我是子节点,这是我从父结点拿到的值——{this.props.fatherName}</div> );}2、子组件向父组件传值(子组件调用父组件中的方法修原创 2020-12-07 21:33:58 · 174 阅读 · 0 评论