[react]读《React全栈》(二)

2019-06-26 本文已影响2人月满轩尼诗_

本书在第三章开始讲解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()：组件卸载完成时调用，一些事件监听和定时器需要在此时清除