react
文章平均质量分 95
guokanglun
这个作者很懒,什么都没留下…
展开
-
react基础知识总结
1. react入门1.1 介绍描述用于动态构建用户界面的 JavaScript 库(只关注于视图)由Facebook开源1.2 React的特点声明式编码 区别于命令式编程,它的特点就是我告诉计算机做什么,但是没有告诉你怎么做.组件化编码React Native 编写原生应用高效(优秀的Diffing算法)1.3 React高效的原因使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。DOM Diff算法, 最小化页面重绘。原创 2021-01-20 14:48:36 · 409 阅读 · 0 评论 -
redux react-redux redux-thunk
文章目录1. 理解redux2. 工作流程3. 核心API4. 安装5. 案例1. 理解reduxredux是一个独立专门用来做状态管理的js库(不是react插件库);作用: 集中式管理react应用中多个组件共享的状态2. 工作流程3. 核心API(1) createStore() : 创建包含指定reducer的store对象(2) store对象: redux库最核心的管理对象; 将state,action与reducer联系在一起的对象store.getState():原创 2020-11-16 15:33:09 · 193 阅读 · 0 评论 -
react axios
文章目录1. 安装2. 使用1. 安装npm isntall axios --save2. 使用import React, { Component } from 'react';import axios from 'axios';class App extends Component { state = { repoName: '', repoUrl: '' } // 页面渲染完成执行异步操作 componentDidMount(){ const原创 2020-11-13 06:05:07 · 166 阅读 · 0 评论 -
react 表单
文章目录1. 包含表单的组件1. 包含表单的组件受控组件:表单输入数据能自动收集成状态非受控组件:需要时手动读取表单数据如下:用户名是非受控组件,密码是受控组件import React, { Component } from 'react';class App extends Component { constructor(){ super(...arguments) this.state = { pwd: '' } } handSubmit原创 2020-11-12 10:04:22 · 116 阅读 · 0 评论 -
react 组件化案例
文章目录1. 功能界面组件化流程2. 效果3. 源码1. 功能界面组件化流程(1)拆分界面,抽取组件(2) 静态页面效果(3) 动态组件效果(动态显示初始化数据; 交互)2. 效果显示todo列表; 添加更新todo列表并清空input标签3. 源码注意点:状态更新只能在初始状态对应的组件里,然后通过参数传递给需要的组件逻辑复杂可以打印this查看是否有相应数据,然后再进行后续处理import React, { Component } from 'react';import原创 2020-11-12 07:31:54 · 322 阅读 · 0 评论 -
react 脚手架 & 路由
全局安装:npm i create-react-app -g创建项目:npm init react-app+ 项目名字原创 2020-11-10 11:52:39 · 746 阅读 · 0 评论 -
react 生命周期
文章目录1. 挂载卸载过程1.constructor()2.componentWillMount()3.componentDidMount()4.componentWillUnmount ()2. 更新过程1. componentWillReceiveProps (nextProps)2.shouldComponentUpdate(nextProps,nextState)3.componentWillUpdate (nextProps,nextState)4.componentDidUpdate(prevP原创 2020-11-10 11:00:10 · 193 阅读 · 0 评论 -
react 组件
文章目录1. 无状态组件2. 有状态组件3. 有状态值改变4. 点击 事件1. 无状态组件它是为了创建纯展示组件,这种组件只负责根据传入的props来展示,不涉及到要state状态的操作。无状态组件的创建形式使代码的可读性更好,并且减少了大量冗余的代码,精简至只有一个render方法,大大的增强了编写一个组件的便利<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2020-11-09 10:59:31 · 251 阅读 · 0 评论 -
jsx & 模块 & 组件& 模块化 & 组件化
文章目录1. jsx2. jsx使用1. jsxReact 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。jsx优点:(1)执行更快,因为它在编译为 JavaScript 代码后进行了优化。(2)是类型安全的,在编译过程中就能发现错误。(3)使用 JSX 编写模板更加简单快速。2. jsx使用<!DOCTYPE html><html lang="en"><head>原创 2020-11-06 22:11:05 · 250 阅读 · 0 评论 -
初识 react
文章目录1. 引入库2. 使用1. 引入库react.js - React 的核心库react-dom.js - 提供与 DOM 相关的功能babel.js - 编辑代码,转换代码2. 使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,原创 2020-11-06 20:51:43 · 176 阅读 · 0 评论