美文网首页
二、react一些用法

二、react一些用法

作者: 懒羊羊3号 | 来源:发表于2018-12-18 17:04 被阅读0次

1、组件变量 state = { },this.setState,调用this.state
2、link传参数
https://github.com/beat-the-buzzer/react-router-test
3、生命周期

  UNSAFE_componentWillReceiveProps(nextProps) {
    this.requestNodeListLatest(nextProps.location.query.text);
  }

  componentDidUpdate(prevProps) {
    if (prevProps.location !== this.props.location) {
      this.requestNodeListLatest(this.props.location.query.text);
    }
  }

  static getDerivedStateFromProps(props, state){
    console.log(props);
    if(props.location!== state.location) {
      console.log(state);
      return {
        location: props.location,
      }
    }
    return null;
  }
image.png

4、PureComponent
只要把继承类从 Component 换成 PureComponent 即可,可以减少不必要的 render 操作的次数,从而提高性能,而且可以少写 shouldComponentUpdate 函数,节省了点代码。
5、键盘事件

onInputKeyDown={this.handleEnterInputSearch}

  handleEnterInputSearch = (e) => {
    if(e.keyCode === 13){
      this.props.history.push({
        pathname: '/flow-node/list',
        query: {
          text:this.state.input
        },
      });
    }
  }

6、e.persist();
如果你想异步访问事件属性,你应该在事件上调用 event.persist() ,这会从池中移除合成事件并允许对事件的引用被用会保留.
7、trim()
去除空格
8、写法区别

  emitEmpty = () => {
    console.log(this); //绑定的dom
  };
emitEmpty() {
console.log(this); //绑定的dom,undifined
}
``

相关文章

  • 二、react一些用法

    1、组件变量 state = { },this.setState,调用this.state2、link传参数htt...

  • React 基础知识介绍

    React 基础知识介绍 本章节会介绍一些 React 的基础知识和基本用法。已经入门 React 基础的同学,可...

  • react中函数调用方法

    方式一:内联调用法 import React, { Component }from 'react'; class ...

  • React 快速回顾

    React Element 基本用法 表示DOM标签的React元素 => const element = ;。...

  • react Hook 一些用法

    useState useEffect useContext 减少组件层级 useMemo 先看一个例子 Captu...

  • react 做的简易todolist

    首先要有一定的react的基础,里面的一些不做解释(包括项目文件的用法及作用) ### 1. 先安装react的...

  • React Router 使用教程

    一、基本用法 React Router 安装命令如下。 $ npm install -S react-router...

  • React Hooks用法详解(二)

    React Hooks 在了解React Hooks之前, 我们先看一下 Class 和函数式 的一般写法 Cla...

  • 路由

    React路由需要借助react-router-dom 基础用法 1、引入:import {BrowserRout...

  • vue

    vue: vue:1.vue 2.Angualar 3.React 一个vuede 基本格式 vue的一些用法...

网友评论

      本文标题:二、react一些用法

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