react学习小结(生命周期- 实例化时期 - 存在期- 销毁时期)

时间:2022-10-06 18:42:58

react学习小结

 

本文是我学习react的阶段性小结,如果看官你是react资深玩家,那么还请就此打住移步他处,如果你想给一些建议和指导,那么还请轻拍~

目前团队内对react的使用非常普遍,之前对react使用不多,正好我目前在做的项目也在使用react+redux,借着这个机会系统的学习下react+redux。

react是什么

react是一个JavaScript类库,通过react,我们可以构建可组合的UI,也就是说,我们可以通过重用组件来组合出我们的UI。可以说react的核心便是组件,目的就是重用和组合。

react解决什么问题

官网有这样一句话.

We built React to solve one problem: building large applications with data that changes over time.

我们知道,随着应用规模的不断扩大,UI背后的数据模型越来越复杂,业务逻辑也不可避免的变得越来越复杂,以至于复杂到仅仅是修复一个简单的问题我们就需要投入大量的时间和精力。

现有的很多前端框架都在致力于解决这样的问题,基本思想都是基于MV*的模式,这里有一篇文章详细介绍了各种MV*模式的原理和优缺点。

那么,react是如何解决这个问题的呢?
react聚焦于组件。react理解的组件实际上就是一个状态机。当组件处于某个状态时,就输出这个状态对应的界面。在React中,我们只需要简单的去更新某个组件的状态,然后输出基于新状态的整个界面。React负责以最高效的方式去比较两个界面并更新DOM树。至于如何对组件之外的数据进行管理,react提出了flux方案。

react点点点

生命周期

前面我们知道,react组件是一个状态机器,以状态为输入,以界面为输出。在不同状态切换之间,react提供了一系列的生命周期方法,大致可以分为如下三类:

实例化时期

react组件在实例化时会依次调用如下组件方法:

  • getDefaultProps
  • getInitialState
  • componentWillMount
  • render
  • componentDidMount

存在期

当react组件被实例化后,用户的一些操作会导致组件状态的更新,此时如下方法将依次被调用:

  • componentWillReceiveProps
  • shouldComponentUpdate
  • componentWillUpdate
  • render
  • componentDidUpdate

销毁时期

在组件销毁的时候,会调用如下组件方法:

  • componentWillUnmount

这里有一段简单的测试代码:

var ChildComponent = React.createClass({
render: function () {
console.log("call render");
return (
<div>
{this.props.data}
</div>
);
},
componentWillReceiveProps: function () {
console.log("call componentWillReceiveProps");
},
shouldComponentUpdate: function () {
console.log("call shouldComponentUpdate");
return true;
},
componentWillUpdate: function () {
console.log("call componentWillUpdate");
},
componentDidUpdate: function () {
console.log("call componentDidUpdate");
},
componentWillUnmount: function () {
console.log("call componentWillUnmount");
}
});
var MyComponent = React.createClass( {
getDefaultProps: function () {
// console.log("call getDefaultProps");
return {
className: "test"
};
},
getInitialState: function () {
// console.log("call getInitialState");
// console.log("log prop: ", this.props);
return {
text: "something"
};
},
componentWillMount: function () {
console.log("call componentWillMount");
},
componentDidMount: function () {
console.log("call componentDidMount");
},
render: function () {
console.log("call render");
var child;
if (this.state.text === "after click") {
child = null;
} else {
child = <ChildComponent data={this.state.text} />;
}
return (
<div className={this.props.className} onClick={this.handleClick}>
{child}
</div>
);
},
handleClick: function () {
this.setState({
text: "after click"
});
}
});
ReactDOM.render(
<MyComponent />,
document.getElementById("content")
);

常用API

关于API的部分,官网已经给了详尽的说明,此处略去。

JSX

JSX是react的核心组件之一。react坚信标签和生成它的代码是紧密相连的,如果展示逻辑非常复杂(事实上大多数情况下都是),那么通过模板语言来实现这些逻辑会产生大量代码,于是react做了一个非常简单、可选类似HTML语法 ,通过函数调用即可生成模板的编译器,称为JSX。

通过JSX,我们可以用HTML的语法创建JavaScript对象。比如,为了在React中生成一个链接,通过纯JavaScript可以这么写:

React.createElement('a', {href: 'http://facebook.github.io/react/'}, 'Hello React!')

通过JSX这就变成了:

<a href="http://facebook.github.io/react/">Hello React!</a>

我们发现通过JSX,代码会更加简洁和易读,使用起来也更加方便。

更过关于JSX的内容请参考官方文档.

组合可重用的组件

前面我们知道,react的核心就是组件,目的就是重用和组合。那么我们如何才能做到组件可重用和组合呢?

首先说说组合。
组合描述的是一种从属关系,在面向对象编程中被描述为HAS-A的关系。
在react中,我们通过如下的代码实现组合:

<Parent><Child data={this.props.childData} /></Parent>

在这个例子中,Parent中有一个Child的实例,Parent是拥有着。在组件中,组件不能改变自身的props,组件的props始终与组件的拥有着设置的保持一致。
这里就有一个非常有趣的事情。组件的props永远来自于组件的拥有者(默认的除外),组件的拥有者可以通过它的props 或state计算出一些值,并把这些值绑定到它们拥有的组件的props上,即在react中,数据就通过props的方式从组件的拥有者单向的流向了组件。

再说说可重用。
可重用,第一感觉就是有一层抽象含义在其中。我们从若干相似的组件中抽象出一层接口,实现公共的组件。换句话说,我们把一些页面上通用的设计元素(按钮、表单等)拆分成接口设计良好的可复用组件。每一个组件经过良好的测试和封装,那么在下次开发相似的页面的时候,可以写更少的代码,也意味着更高的开发效率和更高的质量。

更多关于组件组合和可重用的说明,请参考复合组件可重用组件

react学习小结(生命周期- 实例化时期 - 存在期- 销毁时期)的更多相关文章

  1. react学习二 生命周期

    转自:https://www.cnblogs.com/gdsblog/p/7348375.html react 中compent getDefaultProps object getDefaultPr ...

  2. 【JAVASCRIPT】React学习-组件生命周期

    摘要 整理组件加载过程,详细见官方文档:https://facebook.github.io/react/docs/react-component.html mount 过程 1)constructo ...

  3. React Native之生命周期

    React Native生命周期主要分为三大阶段:实例化阶段(图中上框部分),存在阶段(图中左框部分),销毁阶段(图中右框部分). 如图: 下面简单讲解一下三大阶段中各自的函数: 实例化阶段: 在日常 ...

  4. react第三单元&lpar;react组件的生命周期&rpar;

    第三单元(react组件的生命周期) #课程目标 灵活掌握react组件的生命周期以及组件的活动过程. 能够灵活使用react的生命周期 #知识点 react的类组件的生命周期分为三个阶段 实例期 存 ...

  5. React组件和生命周期简介

        React 简介----React 是 Facebook 出品的一套颠覆式的前端开发类库.为什么说它是颠覆式的呢? 内存维护虚拟 DOM 对于传统的 DOM 维护,我们的步骤可能是:1.初始化 ...

  6. React 学习&lpar;四&rpar; ---- 生命周期函数

    现在我们能修改状态,页面可以进行交互了,但是还有一种状态改变没有解决,那就是倒计时效果,时间一直在变化,组件状态也一直在改变,但我们什么都没有做,如果要实现这样的效果,需要怎么处理? 我们都知道,改变 ...

  7. 2&period; React组件的生命周期

    2. React组件的生命周期 使用React开发时候用到最多的就是React的组件了,通过继承React.Component,加入constructor构造函数,实现Render方法即可.这当中Re ...

  8. Vue与React的异同 -生命周期

    vue的生命周期 创建前 beforeCreate 创建   create 挂载前 beforeMount 挂载 mounted 更新前 beforeUpdate 更新 updated 销毁前 bef ...

  9. React 组件的生命周期方法

    React 组件的生命周期方法 按渲染顺序: 1: componentWillMount() – 在渲染之前执行,在客户端和服务器端都会执行. 2: componentDidMount() – 仅在第 ...

随机推荐

  1. 腾讯信鸽推送Android SDK快速指南

    信鸽Android SDK是一个能够提供Push服务的开发平台,提供给开发者简便.易用的API接口,方便快速接入.目前支持Android 2.2及以上版本系统.本文档将引导用户以最快的速度嵌入信鸽SD ...

  2. C&num;--之文件操作

    1.从文本文件中读取一行文本 StreamReader sr = new StreamReader("C:\\1.txt"); string readline = sr.ReadL ...

  3. fedora yum 使用代理的方法

    配置yum: 编辑/etc/yum.conf添加下列一行: proxy=http://domain/user:passwd@<proxy ip>:80 <proxy ip>:代 ...

  4. 单元测试SimpleTest新手入门

    最近学习单元测试,先用了下PHPunit,结果安装问题一大堆,于是立刻放弃改试simpletest,感觉简单多了.下面列出步骤. 1.下载simpletest(版本1.1.0), http://www ...

  5. asp&period;net 弹出式日历控件 选择日期 Calendar控件

    原文地址:asp.net 弹出式日历控件 选择日期 Calendar控件 作者:逸苡 html代码: <%@ Page Language="C#" CodeFile=&quo ...

  6. Linux前传——第一次写技术博客

    准备写技术博客了.不过,真的没什么技术,以后就写写学习上面遇到的问题与想法吧.

  7. git使用笔记(三)(图文说明) 图解提交更改内容的不同方式,涉及代码

    此步之前的工作和示例请参考以下帖子: git使用笔记(一)Git的下载与配置 git使用笔记(二) 如何把GitHub上项目同步到本地 -------------------------------- ...

  8. UPX脱壳全程分析(转)

    [文章标题]: UPX脱壳全程分析 [保护方式]: 本地验证 [使用工具]: OllyDBG [作者声明]: 只是感兴趣,没有其他目的.失误之处敬请诸位大侠赐教! ------------------ ...

  9. PHP7 学习笔记(十)会话控制

    防守打法 1.设置Cookie,[基于内存的Cookie] setcookie('Username','tinywan'); setcookie('Age','24'); 2.查看Cookie存储位置 ...

  10. win7 wamp 64位 php环境如何开启curl服务?

    这篇文章主要介绍了PHP简单开启curl的方法,较为详细的讲述了PHP开启curl函数库的具体步骤与相关注意事项,需要的朋友可以参考下 本文讲述了PHP简单开启curl的方法.分享给大家供大家参考,具 ...