本书在第三章开始讲解react正式内容，首先来说说react的三大特性：
组件
react一切都是基于组件开发，组件需要有良好的封装性，并且能让代码复用，每个组件都需要有各自的状态，在react中每当状态变更时，会重新渲染整个组件。
具体的说，一个网页可以由多个互相独立的功能单位组成，这种功能单位就叫做“组件”（component）。比如，典型的网页分成页头、内容、页尾三个部分，就可以写成三个组件：Header、Content、Footer。这些组件拼装在一起，就构成了一个页面。
react中分函数组件和类组件
一般来说，正式一点的书写组件或者需要使用状态或者生命周期方法的时候，用类组件，否则使用函数组件，函数组件相对简单，可拓展性比较弱。
PureComponent Vs Component
它们几乎完全相同，但是PureComponent通过prop和state的浅比较来实现shouldComponentUpdate，某些情况下可以用PureComponent提升性能
JSX
jsx是ECMAScript的语法扩展，为React.createElement()函数提供语法糖,简单来说就是可以直接把HTML套在JS中的写法，如下：
class App extends React.Component {
render () {
return (
<div>
<h1>{'hello react'}</h1>
</div>
)
}
}
jsx写法不能直接在浏览器运行，需要借助webapck jsx-loader转换才行，转换后是这样的：
React.createElement('div', null, React.createElement(
'h1', null, 'hello react'
))
Virtual DOM
virtual DOM其实就是虚拟dom。通过js的object对象模拟DOM中的真实节点对象，再通过特定的render方法将其渲染成真实的DOM节点。
Real DOM vs Virtual DOM
虚拟dom和dom的最大区别则为它采用了更高效的渲染方式，组件的dom结构映射到虚拟dom上,当需要重新渲染组件时，react在虚拟dom上实现了一个diff算法，通过算法寻找需要变更的节点，再把修改更新到实际dom上，这样避免了渲染整个dom巨大成本。
Virtual DOM工作原理
1.当任何底层数据发生更改时，整个UI都将以Virtual DOM的形式重新渲染。
2.然后计算先前Virtual DOM对象和新的Virtual DOM对象之间的差异。
3.计算完成之后，真实的dom将只更新实际更改的内容。
在HTML和react事件处理的区别
在HTML中事件名必须小写如onclick，而在react中事件都是驼峰写法：onClick。
在HTML中可以通过返回false来阻止浏览器的默认行为
<a href='#' onclick='console.log("clicked."); return false;' />
而在react中必须调用preventDefault()
function handleClick(event) {
event.preventDefault()
console.log('The link was clicked.')
}
关于refs
同vue一样，react也有refs,通过refs,我们可以获取真实的dom节点。
如何创建refs:可通过react.createRef()创建
class MyApp extends React.Component {
constructor(props) {
super(props)
this.selfRef = React.createRef()
}
render() {
return <div ref={this.selfRef} />
}
}
React中生命周期三大阶段
- 实例化阶段
1.getDefaultProps()：设置默认的props
2.getInitialState()：初始化state
3.componentWillMount()：在dom初始化之前调用，这是render方法调用之前的最后一次修改state的机会
4.render()：创建虚拟dom，进行diff算法，更新dom数
5.componentDidMount()：该方法不会在服务端渲染的过程中调用。可以在这个方法中通过this.getDOMNode()访问到真实的dom - 存在期阶段
6.componentWillReceiveProps(nextProps)：组件接收新的props时调用
7.shouldComponentUpdated(nextProps,nextState)：组件接收新的state和props。如果你确定组件的props或者state的改变不需要重新渲染，可以通过在这个方法里返回false来阻止组件的重新渲染，返回false则不会执行render以及后面生命周期方法。
8.componentWillUpdate(nextProps, nextState)：在组件接收到新的props或者state即将进行重新渲染前会被调用， 不可以在此方法中更新props或者state
9.render()：组件渲染
10.componentDidUpdate()：组件更新完成后调用，此时可以获取并修改dom节点 - 销毁期阶段
11.componentWillUnmount()：组件卸载完成时调用，一些事件监听和定时器需要在此时清除
网友评论