随笔分类 -  React 全家桶(技术栈)

react_结合 redux - 高阶函数 - 高阶组件 - 前端、后台项目打包运行
摘要：Redux 独立的集中式状态管理 js 库 - 参见 My Git 不是 react 库，可以与 angular、vue 配合使用，通常和 react 用 yarn add redux import {createStore} from "redux" const store = createSto 阅读全文
posted @ 2019-01-25 11:14 耶梦加德 阅读(955) 评论(0) 推荐(0)
react_app 项目开发 (9)_数据可视化 ECharts
摘要：数据可视化 ECharts yarn add echarts echarts-for-react 阅读全文
posted @ 2019-01-23 11:36 耶梦加德 阅读(357) 评论(0) 推荐(0)
react_app 项目开发 (8)_角色管理_用户管理----权限管理 ---- shouldComponentUpdate
摘要：角色管理 性能优化（前端面试） 需求：只要执行 setState(), 就会调用 render 重新渲染。由于有时调用了 setState，但是并没有发生状态的改变，以致于不必要的刷新 解决： 重写 shouldComponentUpdate(newProps, newStates) 使之返回 fa 阅读全文
posted @ 2019-01-22 09:37 耶梦加德 阅读(284) 评论(0) 推荐(0)
react_app 项目开发 (7)_难点集合
摘要：/src/App/Admin/Header 布局 import {Row, Col} from "antd" <div className="header_box"> <Row className="header_top"> <span>欢迎</span> <a>退出</a> </Row> <Row 阅读全文
posted @ 2019-01-16 18:47 耶梦加德 阅读(1153) 评论(0) 推荐(0)
react_app 项目开发_遇到的坑
摘要：1. favicon.ico <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico"/> 2. 关于 /static 资源找不到的问题 经过了解，是去 node_modules/react-scripts/config/p 阅读全文
posted @ 2019-01-16 09:08 耶梦加德 阅读(305) 评论(0) 推荐(0)
react_app 项目开发 (6)_后台服务器端-node
摘要：后台服务器端 负责处理前台应用提交的请求，并向前台返回 json 数据 前台应用 负责 展现数据与用户交互 发 ajax 请求与后台应用交互 yarn add axios /src/api/ajax.js /* 自定义封装 axios https://github.com/axios/axios 返 阅读全文
posted @ 2019-01-15 11:37 耶梦加德 阅读(440) 评论(0) 推荐(0)
react_app 项目开发 (5)_前后端分离_后台管理系统_开始
摘要：项目描述 技术选型 react API 接口 接口文档，url，请求方式，参数类型， 根据文档描述的方法，进行 postman 测试，看是否能够得到理想的结果 collections - 创建文件取项目名 - - 添加 url - 指定 post - Body - x-www-form-urlenc 阅读全文
posted @ 2019-01-14 11:59 耶梦加德 阅读(1092) 评论(0) 推荐(0)
react_app 项目开发 (4)_ React UI 组件库 ant-design 的基本使用
摘要：最流行的开源 React UI 组件库 material-ui 国外流行（安卓手机的界面效果）文档 ant-design 国内流行 (蚂蚁金服 设计，一套 PC、一套移动端的____下拉菜单、分页......) PC_git Mobile_git create-react-app myApp yar 阅读全文
posted @ 2019-01-13 14:57 耶梦加德 阅读(707) 评论(0) 推荐(0)
react_app 项目开发 (3)_单页面设计_react-router4
摘要：(web) 利用 react-router4 实现 单页面 开发 SPA 应用 (Single Page Web Application) 整个应用只有 一个完整的页面 单击链接不会刷新页面，本身不向服务器发请求 点击路由链接，指挥更新局部页面 数据都需要通过 ajax 请求获取，并在前台异步展现 阅读全文
posted @ 2019-01-12 10:27 耶梦加德 阅读(399) 评论(0) 推荐(0)
react_app 项目开发 (2)_axios_pubsub-js
摘要：生产环境打包并运行 yarn run build 会src代码进行打包处理，在内存中生成打包文件 将打包文件保存至内存 yarn global add serve serve -s build 将 build 文件夹下所有资源加载到内存中 启动服务器，运行内存中的打包文件，通过浏览器访问 url r 阅读全文
posted @ 2019-01-10 17:29 耶梦加德 阅读(334) 评论(0) 推荐(0)
react_app 项目开发
摘要：react_app 项目开发 npm install -g create-react-app npm root -g // 查看安装包位置 创建项目 create-react-app myApp 技术架构为： react + webpack + es6 + eslint 模块化、组件化、工程化 效果 阅读全文
posted @ 2019-01-09 18:31 耶梦加德 阅读(627) 评论(0) 推荐(0)
React_基本原理_ajax
摘要：React 基本原理 初始化显示界面 创建虚拟DOM树 渲染到 原生 DOM 树 绘制界面显示 更新界面 setState() 更新状态机 重新创建虚拟 DOM 树 新/旧树比较差异 (执行一次 DOM Diff 算法) 更新差异并渲染到对应 原生 DOM (捕获差异，并渲染) 局部界面重绘 基于 阅读全文
posted @ 2019-01-09 16:35 耶梦加德 阅读(339) 评论(0) 推荐(0)
React_生命周期
摘要：初始化 ReactDOM.render(jsx, 原生 DOM 对象)： 组件类定义 static defaultProps = {} static propTypes = {} constructor(props){...} componentWillMount() // 只执行一次，初始化数据 阅读全文
posted @ 2019-01-09 14:56 耶梦加德 阅读(133) 评论(0) 推荐(0)
组件化 - 实例
摘要：步骤： 拆分组件： 拆分界面，抽取组件 静态组件： 通过组件实现静态页面 (无交互) class APP extends React.Component{ render(){ return ( <div> <h1>TodoList</h1> <AddTodo /> <TodoUl /> </div> 阅读全文
posted @ 2019-01-09 12:07 耶梦加德 阅读(215) 评论(0) 推荐(0)
React 面向组件化编程 - 封装了webpack - npm run build 产生的包的 /static 引用路径问题
摘要：React 面向组件化编程 面向对象 > 面向模块 > 面向组件 套路： 注意: 组件名必须大写开头； 只能有一个根标签； <input />虚拟DOM 元素必须有结束标签 方式1. 工厂函数组件 (简单组件) > 只能定义无状态的组件 function MyComponent(){ // 只能 大 阅读全文
posted @ 2019-01-08 12:01 耶梦加德 阅读(1938) 评论(0) 推荐(0)
React 简介及其基本使用
摘要：相关概念： 插件： 别人写好的第三方库 xxx 插件： jQuery 插件 / react 插件 全家桶： 核心库 + 相关插件 构建项目： 对项目源码 进行 编译、合并、压缩......处理，生成能让浏览器高效运行的打包文件 构建用户界面： 显示带数据的界面（将数据以页面的形式展现出来） jQue 阅读全文
posted @ 2019-01-08 09:10 耶梦加德 阅读(1058) 评论(0) 推荐(0)