react大纲
课程大纲:
https://miaov.com/index.php/news/newsDetail/nid/263 原文件
- Npm 基本使用
- 切换镜像, 国内的网络访问 npm 服务器可能比较慢, 切换到国内的镜像会更快
- 安装卸载, 使用 npm 快速安装和卸载项目依赖, 同时也可以把项目依赖声明在 package.json 文件里
- 运行命令, 在 package.json 的 script 字段里面, 你可以声明一些和项目相关的自定义命令, 这样可以快速对项目进行一些相应的操作
- webpack
- 模块打包器, 除了分析 js 模块依赖, 配合相应的 loader 还可以对你的资源依赖进行分析和打包
- loader 相关, 在引入模块前, loader 会先预处理一下模块的内容
- babel-loader 处理 js 模块, 配合不同的 babel 插件可以编译不同内容
- css, style-loader 引入 css, 如果你要引入 css, 应该先让 css-loader 介入处理
- file-loader 加载资源文件, css-loader 会帮你引入一些图片或者你会在 js 里面引入一些资源依赖, 这个时候需要你把这些路径和资源交给 file-loader 处理.
- plugin 相关, 插件会做一些 loader 做不来的事情, 它可能会在构建的不同时间点起作用
- html-webpack-plugin
- clean-webpack-plugin
- ProvidePlugin, 更快速的引入模块
- devtool 找到源码的位置
- webpack-dev-server, 开发测试的利器
react-router-dom
- 构建多视图应用的最佳实践
- 不同类型的Router, 你应该把你的组件置于这个组件之下
- BrowserRouter, 使用 html5 history api, 需要后端的服务器配置
- HashRouter, 它使用起来兼容性更强, 也不需要在服务器做一些其他配置
- Link和 NavLink, 一个增强的 a 链接, 你可以使用它来跳转页面
- Route, 路由的核心组件, 如果 path 被匹配到, 它指定的组件会被渲染
- 使用 component 渲染组件, 接受一个组件变量或回调函数用于渲染
- 使用 render 渲染组件, 接受一个回调函数用于渲染
- 使用 children 渲染组件, 接受一个回调函数用于渲染, 但此 route 一定会被匹配
- match prop,
- location prop
- history prop
- 被匹配到的组件可以通过不同的方式拿到以上三个组件
- exact 级别的匹配, 这意味着你没法利用穿透特性去匹配路由
- strict 级别的匹配, path 的后的 slash 大有不同, 它要求你的 location.pathname 也必须也有 slash
- Switch , 有时候你想让一个的 pathname 匹配到多个 Route 来组合你的页面, 但有时候你只想挑选其中一个, 使用 Switch
- Redirect 路由的重定向 , 如果它被渲染, 会重新跳转地址
- withRouter 可以跨层级拿到 match, location, history
redux
- 管理更复杂的应用状态, 提供可预测的状态管理
- action 动作, 如果你要修改数据, 你应该先发起一个动作
- action type, action是一个对象, 它应该有一个 type 属性标明它的身份
- action creater, 它用来创建 action, 有中间件参与有你还可以在里面封装逻辑和异步操作
- 使用 bindActionCreators 绑定 action creater, 这样你就可以直接发起 action 啦
- reudcer , 计算出下一个应用状态
- 纯函数, 确定的输入总会有相同的数据, 并且无副作用
- 使用 combineReducers 合并子 reducers, reducer 只有一个, 此方法可以把你写的小 reducer 快速合并成一个
- middleware, 中间件, 捕捉每一次 action
- 理解 middleware, 在 action 的发起到 reducer 的执行的期间, 你可以让 middleware 介入并做一些其他操作
- 一个简单的 middleware, redux-thunk, 这样你的 action creator 可以返回更多的数据类型
- store, 应用中唯一 store, 使用这个对象用来维护整个应用的 state
- getState 方法, 获取state
- dispatch( action ), 更新 state
- subscribe(listener) 注册监听器
- react-redux, 让 react 和 redux 连接起来
- Provider 应用中最顶层的组件
- connect, 连接 react组件 和 store, 这个高阶组件可以返回一个增强过后的组件, 如果你想让某个应用从 state 里面拿到数据, 使用 connect
react
- jsx 语法, 写结构的语法糖, 快速创建 dom 结构
- 在 jsx 中嵌入表达式
- jsx 本身作为表达式
- 在 jsx 中指定属性
- 在 jsx 中指定 children
- jsx 中的防注入攻击, react 会把内容转成字符串
- 写在 React 作用域内
- 使用点符号
- 大写开头的自定义组件
- 运行时选择类型的解决方案
- 在属性中使用表达式
- 字符串字面量
- 属性的默认值: true
- 属性的展开写法
- 字面量作为 children
- jsx 作为 children
- 表达式作为 children
- 函数作为 children
- 会被忽略的 Booleans, Null, Undefined, 不会渲染到页面
定义组件, 构建一个可维护的应用
- 类式组件, 有完整的生命周期和内部状态
- 函数式组件, 为渲染而生, 没有生命周期和内部状态
- 使用 PropTypes 对 props 进行类型检查, 在开发期间规范代码和数据检测
- 定义默认 props, 在没有传入 props 的时候, 保证有一个默认值
- 使用 refs 得到真实的 DOM, 可以调用浏览器 dom 的 API
- 使用 refs 得到类组件实例, 可以访问组件实例的方法和属性
Event, 在 jsx 中使用事件
- react 中的合成事件对象, 事件触发会往回调函数传入一个 event 对象, 这是 react 集成的, 也可以通过 event.nativeEvent 拿到原生事件对象
- react 中支持的事件, react 中有着完善的事件支持, 而且不需要额外兼容
- props, 构建视图, 在组件直接建立沟通的桥梁
- 组件之间的交流, 组件之间可以通过 prop 传递数据
- 单向数据流, 组件的数据永远是从顶层流向底层, 这会带来清晰的数据流
- props 只读, 属性是只读的, 这样会保护单向数据流的特性
- state, 更新视图, 把对页面的维护变成对数据的维护
- 定义组件的内部状态, 内部状态意味它某个时刻可能会变化
- react 更新视图的机制, 如果要修改 state, 应该使用 setState
- state 的异步更新, 在一次事件循环中 state 不会马上改变
- state 的合并更新, 多次 setStete 会合并在一起, 保证效率和性能
- 让组件受控, 限制组件自身的行为, 接受 react 控制
- setState API, 通过它来更新组件的状态
- 生命周期, 利用钩子函数更简便的参与页面的状态变化
- Mounting 阶段
- constructor(), 构造组件实例
- componentWillMount(), 组件将要挂载之前
- render(), 返回 jsx, 用于渲染
- componentDidMount(), 组件挂载完成之后调用, 可以在此发起数据请求
- Updating 和相应的生命周期函数
- componentWillReceiveProps(), 依赖于父组件更新阶段的 render 执行, 可以在此 setState
- shouldComponentUpdate(), 可以拦截此次更新, 阻断 render 的执行, 在这里可以做一些性能优化的操作
- render(), 返回 jsx, 用于渲染
- componentDidUpdate(), 更新之后函数会执行
- Unmounting 和相应的生命周期函数
- componentWillUnmount(), 在组件卸载之前可以在此做一些清空操作, 比如不再等待数据返回, 清空定时器和事件
- Mounting 阶段
- jsx 语法, 写结构的语法糖, 快速创建 dom 结构
react大纲的更多相关文章
- React入门---基础知识-大纲-1
-----------------在慕课网学习react入门笔记-------------- ---------博主边学边记录,手把手进行学习及记录---------- --------------- ...
- React Native 网络层分析
文:志俊(沪江Web前端) 本文原创,转载请注明作者及出处 在使用React Native开发中,我们熟练的采用JavaScript的方式发送请求的方式发送一个请求到服务端,但是处理这个请求的过程其实 ...
- vue和react全面对比(详解)
vue和react对比(详解) 放两张图镇压小妖怪 本文先讲共同之处, 再分析区别 大纲在此: 共同点: a.都使用虚拟dom b.提供了响应式和组件化的视图组件 c.注意力集中保持在核心库,而将其他 ...
- React.js 入门与实战课程思维导图
原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,在这里分享了课程中的思维导图,供大家参考. 原文发表于我的技术博客 此导图为课程 ...
- React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了
原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...
- react router @4 和 vue路由 详解(全)
react router @4 和 vue路由 本文大纲: 1.vue路由基础和使用 2.react-router @4用法 3.什么是包容性路由?什么是排他性路由? 4.react路由有两个重要的属 ...
- React+DvaJS 之 hook 路由权限控制
博客 学院 下载 GitChat TinyMind 论坛 APP 问答 商城 VIP 活动 招聘 ITeye 写博客 发Chat 登录注册 原 React+DvaJS 之 hook 路由权限控制 20 ...
- 【React】354- 一文吃透 React 事件机制原理
大纲 主要分为4大块儿,主要是结合源码对 react事件机制的原理 进行分析,希望可以让你对 react事件机制有更清晰的认识和理解. 当然肯定会存在一些表述不清或者理解不够标准的地方,还请各位大神. ...
- react基础学习和react服务端渲染框架next.js踩坑
说明 React作为Facebook 内部开发 Instagram 的项目中,是一个用来构建用户界面的优秀 JS 库,于 2013 年 5 月开源.作为前端的三大框架之一,React的应用可以说是非常 ...
随机推荐
- Spark 0.9.1和Shark 0.9.1分布式安装指南
目录 目录 1 1. 约定 1 2. 安装Scala 1 2.1. 下载 2 2.2. 安装 2 2.3. 设置环境变量 2 3. 安装Spark 2 3.1. 部署 2 3.2. 下载 3 3.3. ...
- 一款基于uploadify扩展的多文件上传插件,完全适用于Html5
http://www.uploadify.com/documentation/ 官网里面有两个插件,一个是要使用flash插件才能文件上传的插件,另外一个是不需要使用要flash插件的文件上传插件完 ...
- 编写高质量代码改善C#程序的157个建议——建议141:不知道该不该用大括号时,就用
建议141:不知道该不该用大括号时,就用 如果if条件语句只有一行语句,要不要使用大括号? 答案是:建议使用.一个括号不会增加多少代码,但是却让代码看上去增加了一致性.括号本身只会让代码更具条理性. ...
- 【小梅哥SOPC学习笔记】Altera SOPC嵌入式系统设计教程
Altera SOPC嵌入式系统设计教程 第1章 概述 SOPC(System On Programmable Chip,可编程的片上系统)是Altera公司提出来的一种灵活.高效的SOC解决方案.它 ...
- 怎么用谷歌浏览器查看请求或响应HTTP头?
要使用谷歌浏览器查看请求或响应HTTP标头,可以采取以下步骤: 在Chrome浏览器,访问一个网址,点击右键,选择检查,打开开发人员工具(或直接按F12). 选择 Network 选项卡. 重新加载页 ...
- Ansible应用领域
1.Ansible应用领域 Ansible的编排引擎可以非常出色地完成配置管理.流程控制.资源部署等多方面工作.与其他IT自动化产品相比较,Ansibe为你提供一种不需要安装客户端软件.管理简单.功能 ...
- CSS中的一些内容总结
一.选择器 1.选择器的分组:一个Style可以对多个选择器生效,只用在不同的选择器中间加入逗号即可.如: h1,h2,h3,h4,h5,h6 { color: green; } PS:CSS规定,所 ...
- delphi中的sql语句中空格问题
sql语句中的冒号 ‘’,在delphi中需要用四个冒号表示 ‘’‘’,delphi中的两个冒号只代表一个冒号
- [leetcode] 1. Valid Palindrome
leetcode的第一题,回文数判断. 原题如下: For example, "A man, a plan, a canal: Panama" is a palindrome. & ...
- Oracle 表关联性 Update 语句的改写,推荐改写方法1
同事写了一个逻辑稍复杂的Update 语句,觉得在代码可读性上有些转圈,交给我帮忙改下. 以下根据原SQL,使用两种方法进行改写,个人推荐方法1的改写.方法2拆分两个SQL来写,代码可读性最强,但是S ...