React学习笔记
学习react过程中的整理的笔记
呀呀音
吃好喝好,长生不老
展开
-
React学习(五)——React Hooks(一)
一、React Hooks简介 React Hooks就是用函数的形式代替原来的继承类的形式,并且使用预函数的形式管理state,有Hooks可以不再使用类的形式定义组件了。 与原始写法对比: 二、useState useState是react自带的一个hook函数,它的作用是用来声明状态变量。 1、useState的声明 useState这个函数接收的参数是状态的初始值,它返回一个数组。 const [ count , setCount ] = useState(0); // 声明一个count原创 2020-12-10 22:17:44 · 347 阅读 · 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 · 149 阅读 · 0 评论 -
React学习(三)——redux(一)安装与创建仓库
1、安装 npm install --save redux // or yarn add redux 2、创建仓库 store是唯一的 只有store能够改变自己的内容 Reducer必须是纯函数 (纯函数:给固定的输入,就一定会有固定的输出,而且不会有任何副作用) 1、在src目录下创建一个store文件夹,然后在文件夹下创建一个index.js文件。index.js就是整个项目的store文件。 // src\store\index.js import { createStore } from原创 2020-12-08 22:02:32 · 233 阅读 · 0 评论 -
React学习(二)——React Router学习
1、安装 npm install --save react-router-dom // or yarn add react-router-dom 2、基本使用 <Route path="/" exact component={Index} /> <Route path="/list/" component={List} /> exact的意思是精确匹配:路径信息要完全匹配成功,才可以实现跳转,匹配一部分是不行的 3、路由上动态传值 使用场景,列表页跳转到详情页的时候需要携带id原创 2020-12-08 19:13:06 · 108 阅读 · 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 · 167 阅读 · 0 评论