这份读书笔记是看了阮一峰的《React 入门实例教程》之后撰写的，留作记录。需要看原文的可以点击前面的书名访问对应链接。
这篇文章的目的
- 介绍react
- 如何下载react
- 如何安装react
- 如何使用react
文章的组织架构
从易到难的开始介绍。
react在页面的部署
- 依赖的两个js
- jsx 模板的标签规范
- 模板的编译应该放到服务器完成
模板语法
- React.render() 转换模板为HTML并插入节点
- 允许HTML和javascript混写。
- 规则是：遇到HTML标签（以<开头）则视为HTML，遇到代码块（以{）开头，视为javascript
- HTML内容可以直接写在javascript变量里
- javascript变量可以直接插入到模板。如果变量是数组，则自动展开这个数组的所有成员
组件
组件介绍
- 用React.createClass来生成组件类
- createClass的传参对象，需要一个render方法，用来描述组件的渲染
- 组件类以大驼峰方式书写
- 组件类以模板的方式调用，写法可以有单标签和双标签两种
- 组件类以模板的方式调用，实际是实例化了产生了一个对象，以下简称为组件
- 组件的调用和HTML标签完全一致，能加入属性。属性的调用，可以通过组件类的实例在javascript中，以this.props.xxx的方式调用
- 组件的style属性设定的时候，期望的值是一个对象{opacity: 0.5, marginLeft: ‘1px’} 而不是一个字符串，最终的写法是{ {opacity: 0.5, marginLeft: ‘1px’}} 外面一对大括号表明是javascript代码块，里面的一对大括号，表明是对象
- 冲突的属性名class和for 要对应改为className和htmlFor，因为class和for是javascript的保留字
- this.props的属性和组件HTML属性一一对应，但是this.props.children例外，它表示组件的子节点
- 在用双标签的方式调用组件的时候，标签之间的HTML即为组件的子节点，完全和原生HTML一致
组件的特性
- findDOMNode
- virtual DOM
- virtual DOM 通过 DOM diff算法映射到真实DOM上
- findDOMNode用于获取跟组件关联的真实DOM的节点
- 只有在virtual DOM插入文档之后才能起作用
- this.state
- 类似状态机的概念
- getInitialState方法来设定初始状态
- 通过用户互动修改状态，一般是对应的event function来setState
- render里面，根据不同的状态渲染出不同的UI
- setState自动调用render重绘UI
- 区分this.props和this.state: this.props类似常量，设定之后不改变；this.state是随着用户互动而变化的特性
- 表单内容的变化也是通过state来进行更新的
组件生命周期
- 三个状态
- Mounting 已插入真实DOM
- Updating 正在被重新渲染
- Unmounting 已移出真实DOM
- 每个状态提供两个回调函数，will在进入状态之前调用，did在进入状态之后调用
- 三个状态共计五种回调函数，书写方式component是前缀，will/did是行为，Mount/Update/Unmount是状态
- componentWillMount()
- componentDidMount()
- componentWillUpdate(object nextProps, object nextState)
- componentDidUpdate(object prevProps, object prevState)
- componentWillUnmount() 为什么没有componentDidUnmount() ?
- 特殊状态的回调
- componentWillReceiveProps(object nextProps) 已加载组件收到新参数
- shouldComponentUpdate(object nextProps, object nextState) 组件判断是否重新渲染时调用 不明白
结合其他库或者框架使用
- react没有任何依赖
- react只关注表现层
- 如果希望对组件的DOM进行操作，尽量在componentDidMount中进行，保证真实DOM已经存在
主旨
React是一个关注表现层，以组件来构建内容，以状态机来完成交互的UI改变的，可以在浏览器端和服务器端同时运行的前端框架。
原创内容，欢迎转载 😊
