Skip to main content

moregeek program

react对于生命周期的深入研究_mb625ae00326074的博客-多极客编程

@[toc]


生命周期


React对于生命周期的深入研究
在这里插入图片描述


static getDerivedStateFromProps()方法


这是新版本的生命周期函数中新增的,通常很少使用。
从字面翻译来看,这意味着在render()方法之前,props返回一个对象来更新状态state,该状态在组件的初始化和更新期间被调用。
我们都知道,类类型组件中使用的static关键字表示类原型的静态方法。
它接收两个参数,一个是props,另一个是state。
传递的属性值用于替换当前组件中的状态。
这个声明循环函数在语义上命名,这有助于理解和记忆。
count的值一直是通过props传入的111,并不会发生任何改变。


static getDerivedStateFromProps(props) {
return props;
}
ReactDOM.render(<Count count="111"/>,document.getElementById('root'))

直接直译意味着当前组件已经安装,初始化和安装操作已经基本完成。
通常,页面挂载后,我们可以向后台发送Ajax异步请求以获取数据,在该组件中还可以完成启动定时器和组件之间的消息订阅和发布。
此组件在开发中经常使用,因此我们应该重点了解其用法。


const element = <HelloMessage/>;
ReactDOM.render(
element,
document.getElementById('example')
);

旧版本中的生命周期函数componentwillmount()现在不推荐使用,其应用也非常有限。
它被人们误用的可能性很高,这可能会导致潜在的无法检测的错误。


class Name extends React.Component {
render() {
return (
{this.props.name}
);
}
}

class Link extends React.Component {
render() {
return (
<a rel="nofollow" href={this.props.site}>
{this.props.site}
</a>
);
}
}

Props 验证


Props验证使用proptype,这可以确保正确使用我们的应用程序组件。React Proptypes提供了许多验证器来验证传入数据是否有效。当无效数据被传递到props时,JavaScript控制台将抛出警告。


class MyTitle extends React.Component {
render() {
return (
Hello, {this.props.title}
);
}
}

下面的示例创建了一个mytitle组件。属性title是必需的,是字符串。
非字符串类型将自动转换为字符串:


MyTitle.propTypes = {
title: PropTypes.string
};
ReactDOM.render(
<MyTitle title={title} />,
document.getElementById('example')
);

可以将prop声明为指定的JS基本数据类型。默认情况下,这些数据是可选的


 optionalArray: React.PropTypes.array,
optionalBool: React.PropTypes.bool,
optionalFunc: React.PropTypes.func,
optionalNumber: React.PropTypes.number,
optionalObject: React.PropTypes.object,
optionalString: React.PropTypes.string,

shouldComponentUpdate()方法


在组件更新之前调用此声明循环函数,这相当于在组件更新前添加一个阀门,以控制组件在满足什么条件时将被更新。
可以控制是否通过返回值更新组件。
如果更新返回true,则不会更新。
如果返回值为false,则当不使用此声明循环函数时,默认返回值为true。
可以是多个对象类型中的一个:


 optionalUnion: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number,
React.PropTypes.instanceOf(Message)
]),

自定义验证器。如果验证失败,则需要返回错误对象。不要使用“控制台警告”或抛出异常,因为“oneoftype”将无效。


customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error('Validation failed!');
}
}

元素变量


可以使用变量来存储元素。
它可以帮助有条件地渲染组件的一部分,而输出的其余部分不会更改。
在下面的示例中,我们将创建一个名为logincontrol的有状态组件。
它将根据当前状态呈现<loginButton/>或<logoutbutton/>,并在上一个示例中呈现<greeting/>。


  handleLoginClick() {
this.setState({isLoggedIn: true});
}

handleLogoutClick() {
this.setState({isLoggedIn: false});
}

render() {
const isLoggedIn = this.state.isLoggedIn;

let button = null;
if (isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
}

return (
<div>
<Greeting isLoggedIn={isLoggedIn} />
{button}
</div>
);
}

正确使用生命周期函数将使我们的开发更有效率。
react official提供了许多生命周期函数,但它们主要使用诸如render()、componentdidmount()、componentwillunmount()和getderivedstatefromprops()等生命周期函数。
其他生命周期函数可以通过引用官方文档直接使用,这就是react中的生命周期函数。


class Counter extends React.Component{
constructor(props) {
super(props);
this.state = {clickCount: 0};
this.handleClick = this.handleClick.bind(this);
}

handleClick() {
this.setState(function(state) {
return {clickCount: state.clickCount + 1};
});
}

Getderivedstatefromprops():在调用render方法之前调用,并将在初始装载和后续更新期间调用。
根据shouldcomponentupdate()的返回值,确定react组件的输出是否受当前状态或属性更改的影响。
Shouldcomponentupdate():当属性或状态更改时,将在渲染执行之前调用Shouldcomponentupdate()。
Render():Render()方法是类组件中必须实现的唯一方法。
Getsnapshotbeforeupdate():在上次渲染输出(提交到DOM节点)之前调用。
Componentdidupdate():它将在更新后立即调用。


 tick() {
this.setState({
date: new Date()
});
}

render() {
return (
<div>
Hello, Runoob!
<h2>现在时间是:{this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}

©著作权归作者所有:来自51CTO博客作者黎燃黎燃的原创作品,请联系作者获取转载授权,否则将追究法律责任

[js入门到进阶] 哎,被vite小坑了一波,大家记得配置build.csstarget为'chrome61'_hullqin的博客-多极客编程

大家好,我是公众号「线下聚会游戏」作者HullQin,开发了《联机桌游合集》,是个网页,可以很方便的跟朋友联机玩斗地主、五子棋等游戏。 1. 用Vite的爽点 之前,我用 《《 合 成 大 西 瓜 》 重 制 版 !( 联 机 版 在 做 了 )》。 以前用Webpack的难处 不得不说,用Vite作为构建工具,是真的方便啊! 以前每当启动一个项目,通常都会用Webpack初始化一下,然后手动

#yyds干货盘点# 前端歌谣的刷题之路-第四十一题-对象字符串_前端歌谣的博客-多极客编程

前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 本题目源自于牛客网 微信公众号前端小歌谣题目请补全JavaScript函数,要求将字符串参数转换为对象的形式返回。 示例: 1. typeof string === 'st

#yyds干货盘点# 前端歌谣的刷题之路-第四十二题-去掉字符串两端空格_前端歌谣的博客-多极客编程

前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 本题目源自于牛客网 微信公众号前端小歌谣题目请补全JavaScript函数,要求去除参数字符串两端的空格并返回。​编辑 核心代码<!DOCTYPE html>&

#yyds干货盘点#再说vue3中的setup方法_文本、的博客-多极客编程

1.参数propsprops是一个对象,包含父组件传递给子组件的所有数据。在子组件中使用props进行接收。包含配置声明并传入的所有的属性的对象。也就是说,如果你想通过props的方式输出父组件传递给子组件的值。你需要使用props进行接收配置。即props:{......}。如果你未通过Props进行接受配置,则输出的值是undefined<template> <div cl

你必须要会uvloop!让python asyncio异步编程性能直逼go协程性能_hullqin的博客-多极客编程

大家好,我是公众号「线下聚会游戏」作者HullQin,开发了《联机桌游合集》,是个网页,可以很方便的跟朋友联机玩斗地主、五子棋等游戏。 背景 最近我在思考后端优化的事情,了解到了uvloop,它是python原生asyncio事件循环的替代品。 先介绍下asyncio Python从3.4开始,引入了asyncio库,参考PEP-3156。Python从3.5开始,引入了async和await

js if("0")_流媒体技术研究院的博客-多极客编程

说if("0")返回的是true,稍微有点基础的程序员都是认可的,因为有内容的字符串都是true,也很少有人因此犯低级错误。if("0"){ alert("哦哦");}但是如果0是由其他地方掉下来的,那情况就稍微复杂了,譬如在一堆选项里:[“0”,“1”,“2”,1,2,3]里面就可能会出现直接将if("0")当做true来处理的遗漏,因为你想当然认为给你的选项都是数字。看下面的例子:&l

react中框架和目录结构_13339380的博客-多极客编程

ant-design一款react的移动端ui框架,提供了大量的组件,方便我们的开发​​官网​​, ​​移动端​​npm也是一个npm模块我们也可以通过npm来安装npm install antd-mobile安装完成,我们就可以在项目中使用这些组件了按需加载antd-mobile提供的组件太多,全部加载进来会使文件很大。所以要按需加载。我们就要为webpack添加babel-plugin-imp

[js入门到进阶] 哎,被vite小坑了一波,大家记得配置build.csstarget为'chrome61'_hullqin的博客-多极客编程

大家好,我是公众号「线下聚会游戏」作者HullQin,开发了《联机桌游合集》,是个网页,可以很方便的跟朋友联机玩斗地主、五子棋等游戏。 1. 用Vite的爽点 之前,我用 《《 合 成 大 西 瓜 》 重 制 版 !( 联 机 版 在 做 了 )》。 以前用Webpack的难处 不得不说,用Vite作为构建工具,是真的方便啊! 以前每当启动一个项目,通常都会用Webpack初始化一下,然后手动

react中路由中的redux和redux拓展_13339380的博客-多极客编程

路由中使用redux在路由中使用redux只需要两步第一步 在路由策略组件中(如HashRouter),渲染Route组件,并在该Route路由规则组件中,引入connect方法处理后的应用程序组件第二步 在Provider组件中,渲染路由策略组件(如HashRouter)。注意:路由规则渲染组件的时候,路由规则组件只负责向组件传递路由相关的数据,其他的数据(如store数据)是不会传递的所以Ro

#yyds干货盘点#再说vue3中的setup方法_文本、的博客-多极客编程

1.参数propsprops是一个对象,包含父组件传递给子组件的所有数据。在子组件中使用props进行接收。包含配置声明并传入的所有的属性的对象。也就是说,如果你想通过props的方式输出父组件传递给子组件的值。你需要使用props进行接收配置。即props:{......}。如果你未通过Props进行接受配置,则输出的值是undefined<template> <div cl

你必须要会uvloop!让python asyncio异步编程性能直逼go协程性能_hullqin的博客-多极客编程

大家好,我是公众号「线下聚会游戏」作者HullQin,开发了《联机桌游合集》,是个网页,可以很方便的跟朋友联机玩斗地主、五子棋等游戏。 背景 最近我在思考后端优化的事情,了解到了uvloop,它是python原生asyncio事件循环的替代品。 先介绍下asyncio Python从3.4开始,引入了asyncio库,参考PEP-3156。Python从3.5开始,引入了async和await

react中的测试方法_13339380的博客-多极客编程

测试方法describe用来描述测试体的第一个参数表示测试的目的(具有目的性)第二个参数是测试体,在测试体中,我们进行测试it用来定义每个测试语句第一个参数表示测试语句的说明(具有目的性)第二个参数是函数,表示测试功能的实现(将具体的断言写在函数内)expect用来定义断言的。参数是一个表达式,返回值就是需要判断的结果,我们可以通过一些判定方法来判断判断方法toBe()相当于===toEqual(