美文网首页
React系列(六):React组件基础与生命周期

React系列(六):React组件基础与生命周期

作者: 繁华落殇 | 来源:发表于2018-01-31 17:59 被阅读0次

本文主要讲解React中关于组件的使用、React特有的JSX语法以及React生命周期的使用等,具体如下:

React的虚拟DOM

React组件

React多组件嵌套

React的语法—JSX

React的生命周期

1、React的虚拟DOM

innerHTML: render html string + 重新创建所有 DOM 元素

Virtual DOM: render Virtual DOM + diff + 必要的 DOM 更新 

更加详细介绍,请查看React虚拟DOM详解

2、React组件

1、创建组件:

1)没有函数定义

2)ES5原生方式:React.createClass,(this自动绑定)

3)ES6形式:extends React.Component,(this来源于super())

2、组件:是React的一个特性

3、组件对于模块化开发的重要性

4、组件的return函数中返回的HTML节点有且只有一个

5、可以给外部使用的组件定义:export default class Header extends React.Component{}

6、组件导入:import Header from “XXX文件”;

7、网页入口:ReactDOM.render(组件, document.getElementById(“xxx”));

详细代码如下:

3、React多组件嵌套

组件可以通过参数传递

return中只允许一个标签容器,但是标签容器中可以存放无数个标签

注意项目的命名和文件的结构化

代码如下:

4、React的语法—JSX内置表达式

语法:{userName == “” ? 用户还没有登录 : 用户名:${userName}}

      注释的写法:{/按钮/}

      HTML显示Unicode转码

      HTML显示特殊字符:dangerouslySetInnerHTML ={{__html : html}}—此方式存在XSS攻击

JSX读取数组的时候,直接数组名,可以访问到所有的成员变量

JSX读取对象时,仍然遵循对象.属性的操作

JSX的语法在编译上遵循规则: 

遇到HTML标签(以<开头)就用HTML规则解析 ;

遇到代码块(以{开头)就用JavaScript规则解析。

代码详情:

5、 React的生命周期

生命周期共提供了10个不同的API(实例化5个、已加载4个、销毁1个)。

1.getDefaultProps

作用于组件类,只调用一次,返回对象用于设置默认的props,对于引用值,会在实例中共享。

2.getInitialState

作用于组件的实例,在实例创建时调用一次,用于初始化每个实例的state,此时可以访问this.props。

3.componentWillMount

在完成首次渲染之前调用,此时仍可以修改组件的state。

4.render

必选的方法,创建虚拟DOM,该方法具有特殊的规则:

5.componentDidMount

真实的DOM被渲染出来后调用,在该方法中可通过this.getDOMNode()访问到真实的DOM元素。此时已可以使用其他类库来操作这个DOM。 

在服务端中,该方法不会被调用。

6.componentWillReceiveProps

组件接收到新的props时调用,并将其作为参数nextProps使用,此时可以更改组件props及state。

7.shouldComponentUpdate

组件是否应当渲染新的props或state,返回false表示跳过后续的生命周期方法,通常不需要使用以避免出现bug。在出现应用的瓶颈时,可通过该方法进行适当的优化。 

在首次渲染期间或者调用了forceUpdate方法后,该方法不会被调用

8.componentWillUpdate

接收到新的props或者state后,进行渲染之前调用,此时不允许更新props或state。

9.componentDidUpdate

完成渲染新的props或者state后调用,此时可以访问到新的DOM元素。

10.componentWillUnmount

组件被移除之前被调用,可以用于做一些清理工作,在componentDidMount方法中添加的所有任务都需要在该方法中撤销,比如创建的定时器或添加的事件监听器。

具体图解如下: 

6、 总结

本文主要是对React组件的书写以及使用作出简要介绍,具体代码可以下载—链接:https://pan.baidu.com/s/1qZATfYG 密码:7kkj

下载完毕之后,通过命令面板定位到当前文件夹,之后执行npm install安装所有环境,安装完毕之后,执行webpack –watch,项目即可运行。

相关文章

  • React Native组件(二)View组件解析

    相关文章React Native探索系列React Native组件系列 前言 了解了RN的组件的生命周期后,我们...

  • React概念图

    React概念图 React组件生命周期概念图 参考文档:React入门教程 组件生命周期React:组件生命周期...

  • React系列(六):React组件基础与生命周期

    本文主要讲解React中关于组件的使用、React特有的JSX语法以及React生命周期的使用等,具体如下: Re...

  • React入门(二)

    三、React组件 React 组件基本上是由组件的构建方式、组件内的状态属性与生命周期方法组成 React.cr...

  • React 组件生命周期

    组件生命周期 参考阅读: component-lifecycle react组件生命周期过程说明 react 组件...

  • react 生命周期

    React 生命周期文档 1、理解 组件对象从创建到死亡它会经历特定的生命周期阶段 React组件对象包含一系列的...

  • React面试题 整理脑图

    react基础 React生命周期 react-router react进阶 react Hooks redux 其他

  • React总结

    [toc] 1.React组件生命周期 1.1 生命周期图 组件的生命周期的图如下: 具体可参考React 组件生...

  • React 文档 Part 1

    —— 基础知识、JSX介绍、React 元素、组件和属性、状态和生命周期 此文档来自 React 官方文档,在英文...

  • 简述React生命周期

    React 适合0基础教程快速上手 github地址 React组件的生命周期(必须掌握) 创建期(五个阶段...

网友评论

      本文标题:React系列(六):React组件基础与生命周期

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