10. react 基础 ref 的使用 及 React 16 的生命周期函数 及 生命周期函数使用场景
一. ref 的使用 ( 直接获取 DOM 元素 )
在 input 标签上 可以使用 ref 属性 获取当前DOM节点
eg:
import React , { Component, Fragment } from 'react';
class MyComponent extends Component {
constructor(props){
super(props);
this.handleInput = this.handleInput.bind(this);
this.state = { arr = [] }
}
render(){
return (
<Fragment>
// input 为当前的 DOM 节点 将 this.input 指向该节点 方便引用 相当于 e.target
<input ref={(input)=>{this.input=input}} />
<button onClick={this.handleInput}>提交</button>
</Fragment>
)
}
handleInput(){
console.log(this.input.value);
this.setState((prevProp)=>({
arr : [...prevProp.arr, this.input.value]
}), ()=>{
// 该段代码 为异步操作 ( setState ) 之后执行的代码
console.log(this.state.arr.length)
})
}
}
export default MyComponent;
二. React 生命周期函数
生命周期函数是指在某一个时刻组件会自动调用执行的函数
1. Initialization 初始化
设置 props 和 state
// 因为所有的 类内部都有 该方法 并不是 react 的生命周期函数
constructor(props){
super(props);
this.status = { }
}
2. Mounting 挂载
// 在组件即将被挂载到页面的时刻自动执行 (挂载前)
// 16.3 将 componentWillMount 更名为 UNSAFE_componentWillMount
// 17.* 将 删除 componentWillMount
componentWillMount(){
console.log('componentWillMount');
}
// 渲染页面
render(){
console.log('render')
}
// 在组件被挂载到页面后自动执行 (挂载后)
componentDidMount(){
console.log('componentDidMount')
}
3. updation 数据更新
props 更新
// 当一个组件 从父组件接受了参数
// 子组件 第一次 出现在父组件中 不会被执行
// 子组件 第一次后 出现在父组件中 会被执行
// 16.3 将 componentWillReceiveProps 更名为 UNSAFE_componentWillReceiveProps
// 17.* 将 删除 componentWillReceiveProps
componentWillReceiveProps(){
console.log('child componentWillReceiveProps');
}
props 和 state 共同更新执行的生命周期函数
// 组件被更新前,会自动执行 判断是否更新 返回 bool 类型的结果 true 为 更新 (后面的函数会执行) false 为不更新 (则后面的函数不会执行)
shouldComponentUpdate(){
console.log('sholdComponentUpdate');
return true;
}
// 组件被更新前,会自动执行
// 16.3 将 componentWillUpdate 更名为 UNSAFE_componentWillUpdate
// 17.* 将 删除 componentWillUpdate
componentWillUpdate(){
console.log('componentWillUpdate');
}
// 渲染更新的 组件
render(){
console.log('render');
}
// 组件被更新之后 自动执行
componentDidUpdate(){
console.log('componentDidUpdate');
}
4. Unmounting 把组件去除
// 将把组件从页面中剔除前执行 (去除挂载前)子组件 方法
componentWillUnmount(){
console.log('child componentWillUnmount');
}
三. 生命周期函数使用场景
1. 除了 render 函数 其他的生命周期函数都可以不存在
// 原因 继承 Component 时 除了 render 函数 其他函数都有 默认函数支持
// 所以要自定义编写 render 函数
2. 当每次 state 改变时 render 函数都要被执行
render 函数执行 会导致 子组件会被重新渲染
但 只有特定条件下 state 的 值才有用 所以 使用
shouldComponentUpdate 进行 代码优化 组织
// 在子组件内编写
// 获取将要变化的 props 和 state -- nextProps 和 nextState
shouldComponentUpdate(nextProps, nextState){
// 如果 下次传递过来渲染的值 不等于 上次的值则渲染 反之 不渲染
return nextProps.value !== this.props.value;
}
3. 使用 获取远程数据 作为 基础数据时 使用 componentDidMount (挂载好后获取数据)
componentDidMount(){
this.ajax().then((res)=>{
})
}
4. 发送 ajax 请求 时 使用
安装 axios
yarn add axios
使用 axios
import axios from 'axios';
componentDidAount(){
axios.get('/api/xxx')
.then(()=>{alert('succ')})
.catch(()=>{alert('err')})
}
10. react 基础 ref 的使用 及 React 16 的生命周期函数 及 生命周期函数使用场景的更多相关文章
- React基础语法学习
React主要有如下3个特点: 作为UI(Just the UI) 虚拟DOM(Virtual DOM):这是亮点 是React最重要的一个特性 放进内存 最小更新的视图,差异部分更新 diff算法 ...
- 36.React基础介绍——2019年12月24日
2019年12月24日16:47:12 2019年10月25日11:24:29 主要介绍react入门知识. 1.jsx语法介绍 1.1 介绍 jsx语法是一种类似于html标签的语法,它的作用相当于 ...
- react基础(1)
在 react入门系列 里面,介绍了一些react的基础知识,在react基础部分,会结合手脚架工具进行更多的总结. 关于webpack我在这里就不讲解了,有需要的小伙伴可以自己去百度一下学习资料,我 ...
- React 基础入门,基础知识介绍
React不管在demo渲染还是UI上,都是十分方便,本人菜鸟试试学习一下,结合阮一峰老师的文章,写下一点关于自己的学习react的学习笔记,有地方不对的地方,希望各位大牛评论指出: PS:代码包下载 ...
- Flux --> Redux --> Redux React 基础实例教程
本文的目的很简单,介绍Redux相关概念用法 及其在React项目中的基本使用 假设你会一些ES6.会一些React.有看过Redux相关的文章,这篇入门小文应该能帮助你理一下相关的知识 一般来说,推 ...
- react基础学习和react服务端渲染框架next.js踩坑
说明 React作为Facebook 内部开发 Instagram 的项目中,是一个用来构建用户界面的优秀 JS 库,于 2013 年 5 月开源.作为前端的三大框架之一,React的应用可以说是非常 ...
- React基础篇学习
到今天为止, 使用react已经一年了, 现在整理一下入门时的一些重要知识, 帮助想要学习react的同学们理解某些内容. React 元素 React 元素,它是 React 中最小基本单位,我们可 ...
- react基础总结
React的特点: 1.声明式: 可以声明式的在js中写html结构: 注意: react是用很像 js 的语言写标签; const jsx = <div className="app ...
- react基础学习
什么是react:React(有时称为React.js 或ReactJS)是一个为数据提供渲染HTML视图的开源JavaScript库; 其特点: 声明式设计:采用声明范式,可以轻松描述应用高效:通过 ...
随机推荐
- 012、Java中发生溢出的转换问题
01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...
- 虚拟机下安装Maven
1.首先需要下载maven安装包(我下载的是apache-maven-3.5.3版本) 官网下载:http://maven.apache.org/download.cgi 2.将压缩包放到虚拟机下(我 ...
- [BJDCTF2020]EasySearch
0x00 知识点 Apache SSI 远程命令执行漏洞 链接: https://www.cnblogs.com/yuzly/p/11226439.html 当目标服务器开启了SSI与CGI支持,我们 ...
- java 九数组分数
九数组分数 1,2,3-9 这九个数字组成一个分数,其值恰好为1/3,如何组法? 下面的程序实现了该功能,请填写划线部分缺失的代码. public class A { public static vo ...
- P1002 写出这个数(Basic Level)
转跳点:
- redis : Can't save in background: fork: Cannot allocate memory
redis : Can't save in background: fork: Cannot allocate memory JAVA程序报错信息: MISCONF Redis is configur ...
- Redis 详解 (三) redis的五大数据类型详细用法
目录 1.string 数据类型 2.hash 数据类型 3.list 数据类型 4.set 数据类型 5.zset 数据类型 6.系统相关命令 7.key 相关命令 我们说 Redis 相对于 Me ...
- while循环和do-while循环语句
while 语句 条件表达式的结果是一个 boolean 值,如果为true,则执行循环体:如果为 false,循环就会结束. while 循环体是一个代码块,所以 while 循环是可以嵌套其他的语 ...
- RabbitMQ消息队列帮助类
调用 //消息队列发消息 MqConfigInfo config = new MqConfigInfo(); config.MQExChange = "DrawingOutput" ...
- 新手学Java,有哪些入门知识点?
很多小伙伴们在刚接触Java的时候,会有些迷茫,不知道该从哪里入手,不管是做前端还是后端,程序员都会用到JAVA,那该掌握哪些必要的基础知识呢.今天就跟大家分享新手学Java,有哪些入门知识点? 下面 ...