JS学习--React（二）

最新推荐文章于 2024-01-24 16:14:20 发布

xiaoyehahaha

最新推荐文章于 2024-01-24 16:14:20 发布

阅读量95

点赞数

分类专栏：自学ing 文章标签： Javascript React

自学ing 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

转载自：React.js 小书 http://huziketang.mangojuice.top/books/react/

状态提升

将子组件依赖的状态保存在两者公共的最近的父组件上

可使用Redux来避免状态提升带来的可维护性等方面的缺陷

挂载

定义：React.js 将组件渲染，并且构造 DOM 元素，然后塞入页面的过程，称为组件的挂载

组件的生命周期

componentWillMount：组件挂载开始之前调用。（组件调用 render 方法之前）

一些组件启动的动作，包括像 Ajax 数据的拉取操作、一些定时器的启动等，就可以放在 componentWillMount 里面进行

componentDidMount：组件挂载完成以后调用。（ DOM 元素已经插入页面后）

组件从页面上销毁的时候，有时候需要一些数据的清理，例如定时器的清理，就会放在 componentWillUnmount 里面去做。

componentWillUnmount：组件对应的 DOM 元素从页面中删除之前调用。

更新阶段的组件生命周期

shouldComponentUpdate(nextProps, nextState)：你可以通过这个方法控制组件是否重新渲染。如果返回 false 组件就不会重新渲染。这个生命周期在 React.js 性能优化上非常有用。
componentWillReceiveProps(nextProps)：组件从父组件接收到新的 props 之前调用。
componentWillUpdate()：组件开始重新渲染之前调用。
componentDidUpdate()：组件重新渲染并且把更改变更到真实的 DOM 以后调用。

* 补充知识：Virtual DOM， https://github.com/livoras/blog/issues/13

简单理解--步骤：

用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中
当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异
把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了

Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。可以类比 CPU 和硬盘，既然硬盘这么慢，我们就在它们之间加个缓存：既然 DOM 这么慢，我们就在它们 JS 和 DOM 之间加个缓存。CPU（JS）只操作内存（Virtual DOM），最后的时候再把变更写入硬盘（DOM）。

ref属性

给某个 JSX 元素加上ref属性，帮助我们获取已经挂载的元素的 DOM 节点，辅助进行界面更新和时间建统等操作，尽量少用。

容器类组件

直接像使用HTML标签一样使用组件<Header>...</Header>，中间添加的JSX 结构可以使用this.props.children获取，获取到的是一个元素的列表，可以使用他的index来分别进行调用，如this.props.children[0]。

补充的属性

dangerouslySetHTML：动态设置元素的innerHTML的属性，需传入一个对象{{__html: ... }}
```
  render () {
    return (
      <div
        className='editor-wrapper'
        dangerouslySetInnerHTML={{__html: this.state.content}} />
    )
  }
```
操作这么麻烦是因为React.js会将包括HTML标签在内的任何元素自动转义成文本，以防止设置innerHTML可能会导致的XSS攻击（跨站脚本攻击），设计的麻烦一点希望大家尽量少使用。
style：设置样式，同样需要传入一个对象（方便动态设置元素的样式），对象内为CSS属性键值对，属性名称不使用 - ，而使用驼峰命名，如font-size换成fontSize

PropTypes参数验证

通过 PropTypes 给组件的参数做类型限制，可以在帮助我们迅速定位错误，这在构建大型应用程序的时候特别有用；另外，给组件加上 propTypes，也让组件的开发、使用更加规范清晰。

使用示例如下：

首先安装prop-types包

npm install --save prop-types

import React, { Component } from 'react'
import PropTypes from 'prop-types'    //导入

class Comment extends Component {
  static propTypes = {
     //设置传入参数的类型必须为对象，使用isRequired关键字限制必须有参数
    comment: PropTypes.object.isRequired   
  }

  render () {
   ...
  }
}

使用isRequired关键字限制必须有参数，也可以使用defaultProps配置默认参数，避免因为未传入参数而导致的错误。