React 学习总结

学习了react的顶层API和组件API 对这些方法有了新的系统的认识，在阅读他们的简介时有时候会有困难 读了好几遍才懂
复习了组件的生命周期，以前学过有个很好的图片示例 贴在了下面方便理解，对一些生命周期函数以及可以在方法中进行的操作有了大致的理解
下面是我在网上找到的一些知识点的总结 也加入了一些自己的标记为方便以后学习查阅
日期：2019/3/11

React顶层API

React

React是React库的入口，如果使用的是预编译包，则react是全局的，如果使用commonIS模块系统则使用require（）函数引入react　
ps：CommonJS 规范是为了解决 JavaScript 的作用域问题而定义的模块形式，可以使每个模块它自身的命名空间中执行。该规范的主要内容是，模块必须通过 module.exports 导出对外的变量或接口，通过 require() 来导入其他模块的输出到当前模块作用域中。

1.React.createClass（常用）
创建一个组件类并进行定义，组件实现了render()方法，该方法返回了一个子级

2.React.createElement（常用）
创建并返回一个新的类型的reactElement
3.React.createFactory
返回一个生成指定类型 reactElements 的函数
4.React.render()
渲染一个reactElement到DOM中，放在container指定的DOM元素下，返回一个到该组件的引用 在此期间会进行diff算法 ，react响应式更新的关键
5.react.unmountComponentAtNode
从DOM中移除已经挂载的React组件，清除相应的事件处理器和State。成功移除返回true 失败返回false
6.React.renderToString
把组件渲染成原始的HTML字符串。该方法仅在服务器端使用。React会返回一个HTML字符串。可以利用此方法在服务器端生成HTML，随后将这些标记发送给客户端。这样可以获得更快的页面加载速度，并且有利于搜索引擎抓取页面
7.React.renderToStaticMarkup
和react.renderToString类似除了不创建多余的DOM属性，可以用来做静态页面的生成
8.React.isValidElement 判断对象是否是个ELEment
9.React.DOM 运用react.createElement为DOM组件提供方便的包装，该方法仅在未使用JSX的时候适用
10.React.PropTypes 包含了能与组件propTypes对象共用的类型，用于验证传入组件的props
11.React.initialzeTouchEvents 配置及react的事件系统，使react能处理移动端的触摸事件
12.React.Children 为处理 this.props.children这个封闭的数据结构提供了有用的工具
(1)react.children.map 在每个直接子级上调用FN函数，此函数的this指向上下文，如果children是一个内嵌的对象或者是数组，它将被遍历，不会传入容器对象到FN中。如果children参数是null或者undefined 那么返回null或者undefined 而不是一个空对象
(2)React.children.forEach 类似于map但是不会返回对象
(3)Count 返回children当中的组件总数，和传递给map或者forEach的回调函数次数一致
(4)Only 返回children中仅有的子级，否则抛出异常

React组件API

ReactComponent

React 组件实例在渲染的时候创建，可以被重复使用，在组件方法中通过this 访问。唯一一种在react之外获取react组件实例句柄的方式就是保存react.render的返回值。在其他组件中使用refs得到相同的结果

1. setState（很常用） 合并当前状态和下一个状态。这是在事件处理函数中和请求会死安函数中触发UI更新的主要方法，另外也支持可选的回调函数，该函数在setState执行完毕并且组件重新渲染完成后调用
   Ps：不能直接调用this.state 因为在之后调用setState可能会替换掉做的更改，把this.state当成不可变得
   setState不会立刻改变this.state 而是创建一个即将处理的state转变。在调用该方法之后获取的this.state可能会得到现有的值而不是新设置的值
   setState不保证同步性
   setState将总是触发一次重绘除非在shouldComponentUpdate（）中实现了条件渲染的逻辑

2. ReplaceState 类似于setState但是会删除之前所有已存在的State键 这些键都不在nextState中

3. forceUpdate（尽量少用） 如果render（）方法从this.state和this.props之外的地方读取数据，就需要通过调用forceUpdate 来告诉react什么时候再次执行render 尽量不使用这个函数 尽量从this.props和this.state中读取数据

4. getDOMNode() （很常用） 如果组件已经挂载倒了DOM上，该方法返回相应的本地浏览器的DOM元素。从DOM中读取值得时候，该方法很有用 。当render返回NUll或者Undefined的时候 this.getDOMNode 返回null

5. isMounted() （常用） 如果组件渲染到了DOM上 该方法返回true 。可以使用该方法保证setState和ForceUpdate在异步场景下的调用不会出错

6. setProps 当需要给一个以渲染的组件打上改变的标记 用此方法进行 但是这个方法仅在根组件上面适用 在他的子组件上不可用
   7.ReplaceProps 类似以setProps 但是删除所有已存在的PROPS 而不是合并新旧两个props对象

组件的生命周期

1.Render方法是必须的 当调用的时候回检测this.props和this.state 返回一个单子级组件。该组件可以使虚拟的本地DOM 也可以是自定义的复合组件
Render函数应该是纯粹的 也就是说该函数不修改组件state每次调用都返回相同的结果，不读写DOM信息 不跟浏览器交互，如果需要和浏览器交互 在componentDidMount()中或者其他生命周期方法中做这件事，保持render纯粹可以使服务器端渲染更加切实可行，也是组件更容易被理解
2.getInitialState()
在组件挂载之前调用一次，返回值将会作为this.state 的初始值
3.getDefaultProps()
在组件类创建的时候调用一次。返回值被缓存下来。如果父组件没有指定props中的某个键，则此处返回的对象中的相应属性将会合并 到this.props
该方法在任何实例被创建之前调用，因此不能依赖于this.props了另外，getDefaultProps返回的任何复杂对象将会在实例间共享，而不是每个实例拥有一份拷贝
4.propTypes 对象允许验证传入到组件的props
5.Mixins mixin数组允许使用混合来在多个组件之间的共享行为 组件协同的一种方法，另一种方法是组件嵌套
6.Statics statics对象允许定义静态的方法，可以在组件类上被调用，因为定义的方法都是静态的 意味着可以在任何组件实例创建之前调用它们，这些方法不能获得state和props，如果想在静态方法中检查props的值 在调用出把props作为参数传进去
7.displayName displayName字符串用于输出调试信息。Jsx自动设置该值

生命周期方法

创建时（挂载）
1、componentWillMount
服务器和客户端都只调用一次，在初始化渲染执行之前立刻调用。 如果在这个方法中调用setState render()将会感知到更新后State，并且仅仅执行一次 尽管State改变了 意思就是在这个方法中调用setState方法对state的修改有且仅有一次 谨慎使用
2、componentDidMount
在初始化渲染执行以后立刻调用一次 进客户端有效，服务器端不会调用。在生命周期中的这个时间点，组件拥有一个DOM展现，可以通过this.getDOMNode()来获取相应的节点
在这个方法中可以用setTimeOut或者setInterval来设置定时器 或者发送AJAX请求
更新时
1、componentWillReceiveProps
在组件收到新的props的时候调用 在初始化渲染的时候该方法不会被调用
用此函数可以作为react在prop传入以后，render（）渲染之前更新state的机会。在该函数中调用this.setState()不会引起二次渲染
2、shouldComponentUpdate
在接收到新的props或者State，将要渲染之前调用。该方法在返回布尔值 如果确定新的props和state不会导致组件更新，此处返回false 则render()不会执行，直到下一次state改变 另外 componentWillUpdate和componentDidUpdate也不会被调用
3、componentWillUpdate
在接收到新的state或props之前理科调用，在初始化渲染的时候该方法不会被调用 使用该方法可以做一些更新之前的准备工作 在这个方法阿里不能调用this.setState()
4、componentDidUpdate
在组件的更新已经同步到DOM上之后立刻被调用。该方法不会再初始化渲染的时候被调用 使用该方法可以在组件更新之后操作DOM元素
移除（卸载时）
componentWillUNmount
在组件从DOM中移除的时候立刻被调用，在该方法中执行必要的清理，比如无效的定时器或者清除在componentDidMount中创建的 DOM元素

虚拟DOM

通过JS的Object对象模拟DOM中的真实节点对象，再通过特定的render方法将其渲染成真实的DOM节点。
就是在diff算法下避免对整个视图进行更新，提高渲染效率
渲染有三个步骤
1、生成DOM树,用JavaScript对象构建虚拟的DOM树，当用JavaScript构造一个节点时 只需要记录节点的类型 属性和子节点即可
2、 当状态变更时，重新构造一颗新的DOM树 再利用diff算法进行两棵树的比较 优先进行深度遍历 对比两棵树的差异，并将差异记录在对象中 常见的四种差异;
（1、替换节点
（2、删除/新增子节点
（3、修改节点属性
（4、改变文本内容
3、进行局部更新
对应四种差异的更新方法
（1、replaceChild()
（2、 appendChild()/removeChild()
（3、 setAttribute()/removeAttribute()
（4、textContent

JSX语法
1、JSX = JavaScriptXML
2、JSX是一种ECMscript语法的新特性，一种定义带属性树结构的语法
3、JSX的特点
（1、）类XML语法易于接受
（2、）增强JS语义化
（3、）结构清晰 抽象化程度高
（4、）代码模块化
（5、）可以在大括号内添加三元表达式，添加注释 或者函数表达式
4、JSX语法
（1、元素名 var HelloWorld = React.creacteClass ({})
ps: React对首字母大小写敏感 小写是DOM自带的节点 大写是用户自定义的节点 尽量使用驼峰式命名
（2、 子节点
Var HelloWord = React.createClass({
Render:function(){
Return

你好,{ this.props.name}

;
}
});
（3、节点属性
ReactDom.render(,mountNode)
Props和State
Props 属性
组件天生自带的，由父组件提供给子组件 不可修改
State 状态
组件自身的状态，在组件创建的时候写入，可以被组件自身改变是组件的私有属性

当props和State 改变时都会触发render函数

React事件系统

合成事件

事件处理程序通过合成事件（SyntheticEvent）的实例传递，SyntheticEvent是浏览器原生事件跨浏览器的封装
和SyntheticEvent一样的浏览器原生事件有：stopPropagation()preventDefault()接口，而且这些接口跨浏览器兼容
如果出于某些原因想使用浏览器原生事件可以使用 nativeEvent属性获取，每个合成事件（SyntheticEvent）对象都有一下属性
boolean bubbles（冒泡）
boolean cancelable（可取消）
DOMEventTarget currentTarget（当前位置）
boolean defaultPrevented（检查是否为该事件调用了preventDefault（）方法）
Number eventPhase（返回一个代表当前执行阶段的 整数值）
boolean isTrusted（是否可信任）
DOMEvent nativeEvent（浏览器原生事件有哪些）
void preventDefault()（取消事件的默认动作）
void stopPropagation() （阻止捕获和冒泡阶段中当前事件的进一步传播）
DOMEventTarget target（页面元素的唯一标识）
Date timeStamp （返回事件发生时的时间戳.）
String type（类型）
React v0.12 中，事件处理程序返回 false 不再停止事件传播，取而代之，应该根据需要手动触发 e.stopPropagation() 或 e.preventDefault()。

补充：钩子函数的意思：就是相当于组件和插件中作者预设了一些函数，这些函数使用者作为配置参数传入的。使用者传入的同名函数就会作为对应的回调函数放入组件中执行，就像钩子一样挂上去。