前言
今天是学习react的第二周了，每天晚上差不多下班学习两个小时，虽说工作中用不到，但是技术学习肯定不嫌多。加油。
使用 create-react-app 创建 react 应用
react 脚手架
- xxx 脚手架: 用来帮助程序员快速创建一个基于 xxx 库的模板项目 a. 包含了所有需要的配置 b. 指定好了所有的依赖 c. 可以直接安装/编译/运行一个简单效果
- react 提供了一个用于创建 react 项目的脚手架库: create-react-app
- 项目的整体技术架构为: react webpack es6 eslint
- 使用脚手架开发的项目的特点: 模块化, 组件化, 工程化
创建项目并启动
代码语言：javascript复制npm install -g create-react-app
create-react-app hello-react
cd hello-react
npm startreact 脚手架项目结构
代码语言：javascript复制ReactNews
|--node_modules---第三方依赖模块文件夹
|--public
|-- index.html----------------- 主页面
|--scripts
|-- build.js-------------------build 打包引用配置
|-- start.js-------------------start运行引用配置
|--src------------源码文件夹
|--components-----------------react组件
|--index.js------------------- 应用入口 js
|--.gitignore------git 版本管制忽略的配置
|--package.json----应用包配置文件
|--README.md-------应用描述说明的 readme 文件react ajax
说明
- React 本身只关注于界面, 并不包含发送 ajax 请求的代码
- 前端应用需要通过 ajax 请求与后台进行交互(json 数据)
- react 应用中需要集成第三方 ajax 库(或自己封装)
常用的 ajax 请求库
- jQuery: 比较重, 如果需要另外引入不建议使用
- axios: 轻量级, 建议使用 a. 封装 XmlHttpRequest 对象的 ajax b. promise 风格 c. 可以用在浏览器端和 node 服务器端
- fetch: 原生函数, 但老版本浏览器不支持 a. 不再使用 XmlHttpRequest 对象提交 ajax 请求 b. 为了兼容低版本的浏览器, 可以引入兼容库 fetch.js
知识点总结
组件间通信
通过 props 传递
- 共同的数据放在父组件上, 特有的数据放在自己组件内部(state)
- 通过 props 可以传递一般数据和函数数据, 只能一层一层传递
- 一般数据-->父组件传递数据给子组件-->子组件读取数据
- 函数数据-->子组件传递数据给父组件-->子组件调用函数
使用消息订阅(subscribe)-发布(publish)机制
- 工具库: PubSubJS
- 下载: npm install pubsub-js --save
- 使用: import PubSub from 'pubsub-js' //引入 PubSub.subscribe('delete', function(data){ }); //订阅 PubSub.publish('delete', data) //发布消息
redux
事件监听理解
原生 DOM 事件
- 绑定事件监听 a. 事件名(类型): 只有有限的几个, 不能随便写 b. 回调函数
- 触发事件 a. 用户操作界面 b. 事件名(类型) c. 数据()
自定义事件(消息机制)
- 绑定事件监听 a. 事件名(类型): 任意 b. 回调函数: 通过形参接收数据, 在函数体处理事件
- 触发事件(编码) a. 事件名(类型): 与绑定的事件监听的事件名一致 b. 数据: 会自动传递给回调函数 至此react应用讲解完毕。
