React基础内容学习记录
purple_lumpy
先,找一个方向,然后,收拾收拾好,一步一步来
展开
-
一些基础准备知识
React.js 16(包含)称为React Fiber。因为在16版本中,React 底层加入了优先级等概念,可以利用事件循环等碎片时间执行一些高优先级的用户交互,提高了React.js 使用过程中的用户体验。React 开发环境准备两种:引入.js 文件来使用React;通过脚手架工具来编码。我们使用第二种,比较不费劲。因为脚手架能自动帮助我们构建一个大型项目的开发流程和目录,允许...原创 2018-12-23 15:54:19 · 156 阅读 · 0 评论 -
Antd 将TodoList 页面美化一下
Antd 是一个比较好的前端UI框架。官网:https://ant.design/index-cn在React 项目中下载,使用 yarn add 命令即可。使用也很简单。在组件中引用它的css 样式,然后按需引入即可。下面贴上代码。import React, {Component} from 'react';import 'antd/dist/antd.css';i...原创 2019-03-04 23:24:41 · 669 阅读 · 0 评论 -
Redux 基本概念 2
Action 和 Reducer 的编写我们可以先下载一个 Chrome 浏览器插件 "redux devtools",方便进行 redux 的调试。添加后,就可以在浏览器的开发者工具中找到 redux 选项卡了,如下。当然,这时会显示 “No store found”, 点击 the instructions 链接,然后它会告诉我们,只要在创建 store 的时候加上一行语句即可...原创 2019-03-06 15:42:57 · 468 阅读 · 0 评论 -
redux 基本概念 3
ActionTypes 的拆分之前的代码中我们把每一个action 都 定义一个type,然后再到 reducer 里面判断这些type 。这样子,万一马虎了,就很难排错,也会不太好维护。我们可以将 type 都放到一起。在src/store 下,建立文件 actionType.js 。然后写入下面内容。export const CHANGE_INPUT_VALUE = 'c...原创 2019-03-06 16:46:43 · 137 阅读 · 0 评论 -
redux 基本概念 4
redux 的一些 基本原则1. 一个项目里只能有一个store 公共存储空间2. 只有 store 能够改变自己的内容3. reducer 必须是纯函数(输入一样则输出一定一样,不会改变输入)redux 核心API (见文知意)createStorestore.dispatchstore.getStorestore.subscribe...原创 2019-03-06 16:56:02 · 130 阅读 · 0 评论 -
UI组件 和 容器组件
像原来的代码:import React, {Component} from 'react';import 'antd/dist/antd.css';import { Input, Button, List } from 'antd';import store from './store/index.js';import { getInputChangeAction, getA...原创 2019-03-07 21:20:11 · 815 阅读 · 0 评论 -
无状态组件
前面我们写了UI组件 和 容器组件。还有一种组件:无状态组件。无状态组件其实就是一个函数。普通的组件,是js中的类,这个类还有一些生命周期函数。所以无状态组件的性能比普通组件要好。当一个组件,只有一个render 函数的时候,就可以被修改成无状态组件。一般,在做UI组件的时候,它没有逻辑操作,只是渲染的话。我们可以使用无状态组件定义它。这是之前的UI组件,代码。impo...原创 2019-03-07 21:34:48 · 243 阅读 · 0 评论 -
redux 中发送异步请求获取数据
我们实现一下,异步获取远程数据,然后将它显示在todolist 中。异步数据获取,我们使用axios。那么我们首先使用一下生命周期函数componentDidMount ,在周期函数里面发送axios 请求。如下。import React, {Component} from 'react';import store from './store/index.js';import ...原创 2019-03-21 17:14:57 · 1580 阅读 · 0 评论 -
使用redux-thunk 中间件进行 ajax 请求的发送
之前我们是把异步ajax 请求直接放在了组件 app.js 中了,当逻辑十分复杂时,我们最好是将这些异步请求放在一个地方进行统一的管理。下面就是我们之前的代码,看看。import React, { Component } from 'react';import './mockdata.js';import axios from 'axios';import "antd/dist/a...原创 2019-03-22 14:25:16 · 224 阅读 · 0 评论 -
什么是Redux 中间件
下面是Redux 的data 流,Redux 中间件是指 action 和 store 之间。之前我们说,在 Redux 中action 只能是对象,action作为对象被直接派发给了store 。当我们使用了Redux-thunk 后,action 可以是函数了。如下图,action 通过dispatch 方法传给了store,dispatch 中使用了Middleware,对它进行了封装。...原创 2019-03-22 14:39:54 · 127 阅读 · 0 评论 -
Redux-saga 中间件
之前我们使用redux-thunk 把异步代码放到了action 里面,这个解决了自动化测试的一些问题以及代码的拆分管理。redux-saga 也是做异步代码拆分的中间件,可以把它将 redux-thunk 互换。我们要使用redux-saga,先把之前redux-thunk 相关代码删掉。然后,我们在github 上找到 redux-saga :https://github.com...原创 2019-03-23 13:40:03 · 184 阅读 · 0 评论 -
Redux 基本概念 1
Redux 实际上是一个数据层框架,它将数据存储在Store 中。每个组件可以从Store 中获取数据,也可以修改Store 中的数据。Redux 的工作流程 Redux Flow如下,请求Store数据:React Components 向 Action Creators 发送请求获取Store 中的数据,Action Creators 向Store 提交请求,Store 则向Reduc...原创 2019-03-04 23:19:39 · 183 阅读 · 0 评论 -
React 中实现CSS过渡动画 与 动画效果
我们先在项目的src目录下,新建一个文件App.js ,代码如下。import React, { Component, Fragment } from 'react'class App extends Component { render() { return ( <Fragment> <div>hello</div&...原创 2019-01-31 11:48:42 · 3284 阅读 · 0 评论 -
React 工程目录文件介绍
我们可以先创建一个项目。进入桌面目录下,使用命令 npx create-react-app 项目名创建完成后,我们打开这个项目目录。package-lock.json 文件,是项目依赖的安装包的版本号。然后READEME.md 是项目的描述。可以把它的内容删掉,用markdown语法写自己的内容。然后是package.json 文件,任何一个脚手架工具里都有一个packag...原创 2018-12-23 16:20:12 · 1372 阅读 · 0 评论 -
JSX 一些语法 要注意的
JSX的注释。首先,JSX 代码,是在render 中 return 里面的,然后,它的注释写法是下面这样的。render() { return ( <React.Fragment> <div> {/*注释*/} <label htmlFor="insertArea">输入内容...原创 2019-01-13 17:21:10 · 250 阅读 · 0 评论 -
React 单向数据流 视图层框架
什么是React 中的单向数据流。首先父组件向子组件传值,可以通过属性传递。子组件向父组件传值,可以调用父组件传过来的函数。单向数据流,是指父组件可以向子组件传递数据,但子组件不可以修改这些数据,否则会报错。React.js 是视图层框架大型界面开发时,React.js 只负责视图层内容,我们还需要数据层框架等的支持。因为很明显,当复杂的组件关系之间,需要传递数据,React.js...原创 2019-01-13 18:00:38 · 781 阅读 · 0 评论 -
安装一下React developer tools
应该是要翻墙。先翻吧,然后打开chrome 中的扩展程序,如下。 然后,点扩展程序,如下,进入网上商店,。 然后找到react developer tools,添加至Chrome 即可。...原创 2019-01-13 18:16:10 · 379 阅读 · 0 评论 -
PropTypes 与 DefaultProps
每个组件都有自己的props 参数。这个参数,是从父组件接收到的一些属性。本篇主要介绍,接收参数时,如何对参数的类型做校验;如何定义参数的默认值。接收参数的类型的校验:PropTypes 我们首先要引入 PropTypes,脚手架中自带了 prop-types包。然后使用如下。import React, { Component} from 'react';import...原创 2019-01-13 18:41:07 · 1427 阅读 · 2 评论 -
props, state 与render函数
在React 中,当组件的state 或者props 发生改变的时候,render函数就会重新执行。当父组件的render 函数被运行时,它的子组件的render 函数都将被重新运行。...原创 2019-01-13 18:50:38 · 243 阅读 · 0 评论 -
React 中ref 的使用
ref 作用是在React 直接操作DOM【不推荐】它的使用方法如下。在TodoList.js 中然后呢,setState() 是一个异步函数。如果想在它执行完后,再执行操作,可以按下面的写法。...原创 2019-01-20 13:20:35 · 217 阅读 · 0 评论 -
React 中的生命周期函数
生命周期函数是指在某一时刻组件会自动调用的函数。比如 render 函数就是一个生命周期函数。当 state 和props 发生改变的时候,就会被重新执行。constructor 函数,是在组件创建的时候会被调用。按理说也符合生命周期函数的定义,但是它并不是React独有的函数,它是ES6规定的写法。对一个React组件来说,它会经历如下几个过程,初始化,挂载(有三个周期函数),更新,...原创 2019-01-20 14:17:19 · 393 阅读 · 0 评论 -
使用react-transition-group 实现动画
使用CSS3 提供的transition 与 animation 可以实现动画效果,但是在一些复杂效果时,还是需要借助js的,这儿介绍一下react 的动画框架,更方便的写一些动画。react-transition-group 是react 的一个第三方模块。借助这个模块,可以实现更加复杂的动画效果。可以在GitHub 上找到这个项目。https://github.com/reactjs/...原创 2019-01-31 14:32:25 · 652 阅读 · 0 评论 -
React 生命周期函数使用场景 及ajax请求 前端模拟数据
React 中的生命周期函数是很重要的。我们在写组件的时候,组件都是继承自React.Component 的,Component内置了其他所有生命周期函数,唯独没有render 函数。因此我们在写组件的时候,一定要定义render 函数。1. shouldComponentUpdate 函数我们在浏览器打开todolist,在chrome的调试工具中勾选highlight update...原创 2019-01-30 15:23:47 · 938 阅读 · 0 评论 -
React-redux 介绍
前面我们了解了redux 以及redux 的中间件 redux-thunk,redux-saga。下面,我们来继续了解一下 react-redux。react-redux 是一个第三方模块,能够帮助我们在react 中更方便的使用redux。好啦,我们现在用react-redux 重新写一个todolist。之前的store文件夹,和src 里面组件代码都可以删掉了。我们先来安装rea...原创 2019-03-23 15:58:12 · 152 阅读 · 0 评论