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

作者: 月满轩尼诗_ | 来源:发表于2019-06-26 21:28 被阅读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():组件卸载完成时调用,一些事件监听和定时器需要在此时清除

相关文章

网友评论

    本文标题:[react]读《React全栈》(二)

    本文链接:https://www.haomeiwen.com/subject/titfcctx.html