React.js学习知识小结（一）

学习React也有半个月了吧，这里对所学的基础知识作个简单的总结。本身先是跟着官方文档学，差很少学了四五天，也跟着入门教程作了一个简单的小栗子。而后跟着阮一峰老师的教程上手了几个小Demo，后来在网上发现了一本很好的书React.js小书，本身断断续续也学了几天，上面也几个实战的小项目，能够跟着练练手。
话很少说，就直接来总结吧！

• JSX
• 组件
• 区分props和state
• 生命周期函数
• 事件系统
• 高阶组件
• React.js的context
• 函数式编程
• 使用PropTypes检查类型
• ref属性和React.js中的DOM操做

JSX

---

JSX实际上是一个表达式，可是通过编译以后，JSX表达式会成为常规的JavaScript对象，能够在JSX中嵌入任何的JavaScript表达式，方法是放在花括号里面，还能够将JavaScript表达式嵌入到HTML的属性当中，还有HTML属性也是使用驼峰式命名的方法。
注意：这里JSX防止注射攻击，React DOM会在渲染以前将嵌入在JSX中的任何值进行转义，在呈现以前，所有转换成字符串。
这里引出两个个关于面试的问题？

1. 怎么将一个相似HTML的JSX结构转换成一个JavaScript对象
2. 为何不直接经过JSX到达DOM元素呢，而是要经过JSX-JavaScript对象-DOM元素-插入页面。
   针对第一个问题，须要先了解JSX的原理问题，其实JSX就是JavaScript对象，其实每一个DOM元素的结构均可以用JavaScript对象来表示，一个DOM元素包含的信息其实只有三个：标签名、属性、子元素。

{
    tag: 'div', 
    attrs: { className: 'box', id: 'content'}, 
    children: [
                         { tag: 'div', arrts: { className: 'title' }, children: ['Hello'] },
                       { tag: 'button', attrs: null, children: ['Click'] }
] 
}

我也只是想到一个笨的方法思路，既然想将一个相似HTML的结构的JSX转换成一个JavaScript对象，天然而然须要一个中间者，而这个中间者能够是一个函数，经过传入参数，而后返回一个JavaScript对象，这个参数能够经过传统的DOM操做来获取这个JavaScript对象所须要的tag，attrs，children。

针对第二个问题，有两个缘由：
第一个：当咱们拿到一个表示UI结构和信息的对象的时候，不必定会把元素渲染到浏览器的普通页面上，这个是经过react-dom实现的，也有可能将这样的对象渲染到canvas，渲染成一个APP.
第二个：当数据要变化的时候，须要更新组件的时候，能够用比较快的算法来操做JavaScript对象，而不用直接操做页面上的DOM，这样就能够减小浏览器重排，极大的优化性能。

组件

说到组件问题，就有几个小点须要提出来

• 怎么划分组件
  -有状态组件和无状态组件
• 组件的组合和继承
  -组合组件至关于构建了一个组件树
• 编写组件时需注意的规范
  1.组件的私有方法都是以_开头，全部事件监听的方法都用handle开头，把事件监听方法传给组件的时候，属性名用on开头
  2.组件内容的编写顺序：
  （1）static开头的类属性，如defaultProps，propTypes
  （2）构造函数，constructor
  （3）getter和setter
  （4）组件的生命周期
  （5）_开头的私有方法
  （6）事件监听的方法
  （7）render开头的方法，有时候render方法里面的内容会分开到不一样函数里面进行，这些函数都以render开头
  （8）render方法

区分props和state

React元素能够是DOM标签，也能够是用户自定义组件，在涉及到组件渲染的时候，就须要用到自定义组件，当React元素遇到的是用户自定义组件，它会将JSX属性看成单个属性传递给该组件，这个对象称之为props。

对于state，要实时更新UI是经过某个组件内部的方法，从而实现封装的效果。状态和属性十分类似，可是状态是私有的，彻底受控于当前组件，用ES6的类的语法定义组件，有一些特性，局部状态就是如此。

使用类class定义组件，就可使用类的一些特性：局部状态和生命周期钩子。并且不能直接更新状态，而是使用setState()方法，并且初始化this.state的方法只能是构造函数里面。

组件能够选择将状态做为属性传递给其子组件，这个一般被称为自顶向下或单向数据流。能够在有状态的组件中使用无状态组件，也能够在无状态组件中使用有状态组件。

尽可能少的使用state，尽可能多的使用props。

生命周期函数

组件的生命周期能够分红3个状态：
Mounting：已插入真实DOM，
updating：正在被从新渲染，
Unmounting：已移出真实DOM.
上面的三种状态又存在两种：will和did，因此总共来讲有6种方法。

---

1.Mounting状态下的方法调用顺序：

->getDefaultProps()：对于每一个组件类来说，这个方法只会调用一次，该组件类的全部后续应用，getDefaultProps将不会再被调用，其返回的对象能够用于设置默认的props值
->getInitialState():在组件实例化以前被调用一次，返回初识的state值，有状态组件应该实现此函数。对于组件的每一个实例来讲，这个方法的调用有且只有一次，用来初识话每一个实例的state，在这个方法里面能够访问组件的props，每个React组件都有本身的state，与props的区别在于state只位于组件的内部，而props在全部实例中共享。
->componentWillMount():在组件挂载以前调用一次
->render()
->componentDidMount()：在组件挂载以后调用一次

2.每次修改state，都会从新渲染组件，会依次调用下列方法
shouldComponenrtUpdate()
componentWillUpdate()
render()
componentDidUpdate()

---

3.Updating状态下的顺序
父组件render()
->componentWillReceiveProps:组件的props属性能够经过父组件来更改，此时这个方法将被调用。能够在这个方法里更新state，以触发render从新渲染组件。
->shouldComponentUpdate()：能够返回flase阻止组件的从新渲染，从而提升性能
->componentWillUpdate()
->render()
->componentDidUpdate()：除了首次render以后调用componentDidMount，其余render结束以后都调用这个方法

---

4.Unmounting
每当React使用完一个组件，这个组件必须从DOM中卸载后被销毁，此时
componentWillUnmount会被执行，完成全部的清理和销毁工做。在componentDidMount中添加的任务都须要在该方法中撤销，如建立的定时器或时间监听器。

事件系统

在React.js中不须要手动调用浏览器原生的addEventListener进行事件监听，它帮咱们封装好了一系列的on事件，并且不须要考虑不一样浏览器的兼容性。这些事件的属性都要用驼峰命名法。这些on事件监听只能用在普通的HTML标签上，而不能用在组件标签上。

和普通浏览器同样，事件监听函数会自动传入一个event对象，这个对象和普通的浏览器event对象所包含的方法和属性都基本一致，不一样的是React.js这个event对象不是浏览器提供的，而是它本身内部构建的。React.js将浏览器原生的event对象进行了封装，不用考虑浏览器兼容问题。

Function.prototype.bind,调用f.bind(someObject)会建立一个和f有着相同函数体和做用域的函数，可是这个新函数中，this将永远被绑定在bind的第一个参数，不管这个函数是如何被调用的。React.js的事件监听方法须要手动bind到当前实例，这种模式在React.js中是很是经常使用的

事件分个简单的小类：

• 剪贴板事件
• 键盘事件
• 鼠标事件
• 触摸事件
• 焦点事件
• 表单事件
• UI事件