一. 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 的生命周期函数 及 生命周期函数使用场景的更多相关文章

  1. React基础语法学习

    React主要有如下3个特点: 作为UI(Just the UI) 虚拟DOM(Virtual DOM):这是亮点 是React最重要的一个特性 放进内存 最小更新的视图,差异部分更新 diff算法 ...

  2. 36.React基础介绍——2019年12月24日

    2019年12月24日16:47:12 2019年10月25日11:24:29 主要介绍react入门知识. 1.jsx语法介绍 1.1 介绍 jsx语法是一种类似于html标签的语法,它的作用相当于 ...

  3. react基础(1)

    在 react入门系列 里面,介绍了一些react的基础知识,在react基础部分,会结合手脚架工具进行更多的总结. 关于webpack我在这里就不讲解了,有需要的小伙伴可以自己去百度一下学习资料,我 ...

  4. React 基础入门,基础知识介绍

    React不管在demo渲染还是UI上,都是十分方便,本人菜鸟试试学习一下,结合阮一峰老师的文章,写下一点关于自己的学习react的学习笔记,有地方不对的地方,希望各位大牛评论指出: PS:代码包下载 ...

  5. Flux --> Redux --> Redux React 基础实例教程

    本文的目的很简单,介绍Redux相关概念用法 及其在React项目中的基本使用 假设你会一些ES6.会一些React.有看过Redux相关的文章,这篇入门小文应该能帮助你理一下相关的知识 一般来说,推 ...

  6. react基础学习和react服务端渲染框架next.js踩坑

    说明 React作为Facebook 内部开发 Instagram 的项目中,是一个用来构建用户界面的优秀 JS 库,于 2013 年 5 月开源.作为前端的三大框架之一,React的应用可以说是非常 ...

  7. React基础篇学习

    到今天为止, 使用react已经一年了, 现在整理一下入门时的一些重要知识, 帮助想要学习react的同学们理解某些内容. React 元素 React 元素,它是 React 中最小基本单位,我们可 ...

  8. react基础总结

    React的特点: 1.声明式: 可以声明式的在js中写html结构: 注意: react是用很像 js 的语言写标签; const jsx = <div className="app ...

  9. react基础学习

    什么是react:React(有时称为React.js 或ReactJS)是一个为数据提供渲染HTML视图的开源JavaScript库; 其特点: 声明式设计:采用声明范式,可以轻松描述应用高效:通过 ...

随机推荐

  1. 012、Java中发生溢出的转换问题

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  2. 虚拟机下安装Maven

    1.首先需要下载maven安装包(我下载的是apache-maven-3.5.3版本) 官网下载:http://maven.apache.org/download.cgi 2.将压缩包放到虚拟机下(我 ...

  3. [BJDCTF2020]EasySearch

    0x00 知识点 Apache SSI 远程命令执行漏洞 链接: https://www.cnblogs.com/yuzly/p/11226439.html 当目标服务器开启了SSI与CGI支持,我们 ...

  4. java 九数组分数

    九数组分数 1,2,3-9 这九个数字组成一个分数,其值恰好为1/3,如何组法? 下面的程序实现了该功能,请填写划线部分缺失的代码. public class A { public static vo ...

  5. P1002 写出这个数(Basic Level)

    转跳点:

  6. 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 ...

  7. Redis 详解 (三) redis的五大数据类型详细用法

    目录 1.string 数据类型 2.hash 数据类型 3.list 数据类型 4.set 数据类型 5.zset 数据类型 6.系统相关命令 7.key 相关命令 我们说 Redis 相对于 Me ...

  8. while循环和do-while循环语句

    while 语句 条件表达式的结果是一个 boolean 值,如果为true,则执行循环体:如果为 false,循环就会结束. while 循环体是一个代码块,所以 while 循环是可以嵌套其他的语 ...

  9. RabbitMQ消息队列帮助类

    调用 //消息队列发消息 MqConfigInfo config = new MqConfigInfo(); config.MQExChange = "DrawingOutput" ...

  10. 新手学Java,有哪些入门知识点?

    很多小伙伴们在刚接触Java的时候,会有些迷茫,不知道该从哪里入手,不管是做前端还是后端,程序员都会用到JAVA,那该掌握哪些必要的基础知识呢.今天就跟大家分享新手学Java,有哪些入门知识点? 下面 ...