随笔分类 - React
1
摘要：1. 安装 react-redux yarn add react-redux 2. react-redux 编写 TodoList 使所有子组件 都能使用 store #index.js import React from 'react'; import ReactDOM from 'react-d
阅读全文
摘要：1. redux 数据流程图 View 会派发一个 Action Action 通过 Dispatch 方法派发给 Store Store 接收到 Action 连同之前的 State 发给 Reducer 生成新的 State Redux 的 中间件指的是 Action 和 Store 之间 中间
阅读全文
摘要：1.发送异步请求获取数据 1.引入 axios ( 使用 yarn add axios 进行安装 ) import axios from 'axios'; 2. 模拟 在元素完成挂载后加载数据 并初始化 redux # TodoList.js componentDidMount(){ axios.g
阅读全文
摘要：1.组件的拆分 组件拆分的前提 当所有的逻辑都出现在一个组件内时 组件会变得非常复杂 不便与代码的维护 所以对组件进行拆分 IU组件 进行页面渲染 容器组件 进行逻辑操作 UI组件的拆分 新建一个 TodoListUI.js 将 TodoList 组件的 render 方法进行拆分封装为 UI 组件
阅读全文
摘要：1. redux 简述 当 store 内的 数据进行变更的时候 多个组件感知到 store 内的数据变化 将会被自动更新 2. redux 工作流 Store 代表数据存储 (例如: 图书馆管理员) React Components 代表 react 组件 (例如: 借阅的人) Action Cr
阅读全文
摘要：一. 过渡动画 # index.js import React from 'react';import ReactDOM from 'react-dom';import App from './app';ReactDOM.render(<App />, document.getElementById
阅读全文
摘要：charles参考文档 charles官网 模拟数据 模拟 axios 请求的数据 eg: 1. 编写 axios 请求 axios.get('/api/xxx') .then(()=>{alert('succ')}) .catch(()=>{alert('err')}) 2. 在 Desktop
阅读全文
摘要：一. ref 的使用 ( 直接获取 DOM 元素 ) 在 input 标签上 可以使用 ref 属性 获取当前DOM节点 eg: import React , { Component, Fragment } from 'react'; class MyComponent extends Compon
阅读全文
摘要：1. 减少子组件渲染 当 父组件 state 内的某个值(eg:value) 不变时 子组件菜 render shouldComponentUpdate(nextProps, nextState){ // 当父组件传递到子组件的值不同时 子组件才渲染 return nextProps.value !
阅读全文
摘要：一.虚拟DOM React 原理 1. 存放 state 数据 2. JSX 模版 3. 数据 + 模版 生成虚拟DOM(虚拟DOM就是一个JS 对象， 用来描述真实DOM) eg: ['div', {id:'abc'}, ['span', {}, 'hello world']] 4. 用虚拟DOM
阅读全文
摘要：一. PropTypes 与 DefaultProps 官方文档 1. PropTypes 属性校验 引入 PropTypes import PropTypes from 'prop-types'; 强校验 props 属性 eg: import React, { Component } from
阅读全文
摘要：1. 安装 react 开发调试工具 React Developer Tools 打开 chrome 浏览器访问 chrome://extensions/ 点击右上角的 拓展程序 -> 打开 chrome 网上应用店 搜索 react 选择 React Developer Tools 并点击 添加至
阅读全文
摘要：1. 声明式开发 通过绑定元素 在数据变更时 对元素进行动态渲染 2. 可以与其他框架并存 不在React的绑定元素内， 可以使用其他框架 如 ( vue jQuery 等 ) 进行元素操作 3. 组件化 1. 定义组件 继承 React.Component 2. 区分自定义组件和网页基本元素(基本
阅读全文
摘要：1.将 todoList 进行拆分 创建 编写TodoList.js 创建 编写TodoItem.js #TodoItem.js
阅读全文
摘要：编写 TodoList 功能 react 入口 js #src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import TodoList from './TodoList' ReactDOM.rende
阅读全文
摘要：1.最基础的 JSX 语法 普通javaScript中 引入 标签 let html = '<h1>hello</h1>'; jsx语法 let JSX_html = <h1>JSX</h1> 自定义标签 import React from 'react'; import ReactDOM from
阅读全文
摘要：1. react-app 脚手架的 目录结构 node_modules -d 存放 第三方下载的 依赖的包 public -d 资源目录 favicon.ico - 左上角的图标 index.html - 项目首页模板 manifast.json - 如果是一个 app 定义 app 的图标 网址
阅读全文
摘要：一、简介 由 Facebook 推出 2013 年 开源 的 函数式编程的 使用人数最多的 前端框架 拥有健全的文档与完善的社区 ( 官网 ) react 16 称为 React Fiber ( 底层 可以用事件循环的 碎片时间 可以执行优先级较高的 事件 提升用户体验 ) 二、react.js 和
阅读全文
摘要：1. 创建 demo 目录 mkdir demo 2. 初始化应用 npm init 工程信息 package name : tetris-class-demo version: description: tetris game entry point: test command: git repo
阅读全文
摘要：1. 需求分析 俄罗斯方块的要素 界面展示 定时刷新 键盘响应 方块模型 游戏规则 俄罗斯方块 比 "电商购物车" 好在哪? 业务比较简单, 人人都了解, 不需要过多前置知识 技术栈比较单纯，不需要使用过多的工具 本身的复杂性高于"购物车" 可以在成品的基础上进行技术演进， 过渡到前端框架 重点 重
阅读全文
1
浙公网安备 33010602011771号