react使用节流防抖性能优化-获取自定义属性-函数传参-基础语法

/* * @Description: react基础语法集锦,每天了解一点点 * @Version: 2.0 * @Autor: lhl * @Date: 2020-06-01 10:20:33 * @LastEditors: lhl * @LastEditTime: 2020-06-01 11:47:26 */ 

// props和state的不同？props 是传递给组件的（类似于函数的形参），而 state 是在组件内被组件自己管理的（类似于在一个函数内声明的变量）
 import React, { Component } from 'react' import _ from 'lodash'; export default class App extends Component { render() { return ( <div>
        <p>hello react</p>
        <Foo></Foo>
        <Bar></Bar>
        <LoadMore></LoadMore>
        <Searchbox></Searchbox>
      </div>
 ) } } class Foo extends Component { // 点击事件
  // 在 render 方法中使用 Function.prototype.bind 会在每次组件渲染时创建一个新的函数，可能会影响性能
  // 在 render 方法中使用箭头函数也会在每次组件渲染时创建一个新的函数，这会破坏基于恒等比较的性能优化。
  // 函数传递参数的方式一
 handleClick(id) { console.log('Click callback render箭头函数',id,this); // 输出 Click callback render箭头函数 1 和 组件实例
 } render() { return ( <div>
        <button onClick={() => this.handleClick(1)}>Click Foo</button>
      </div>
 ) } } class Bar extends Component { // 点击事件
  // 为什么我的函数每次组件渲染时都会被调用? 正确做法是，传递函数本身（不带括号）
  // 函数传递参数的方式二
 handleClick(name){ console.log('Click callback',name,this); // 输出 Click callback 'bob' 和 组件实例
 } // react 通过 data-attributes 传递参数
  handleClickGetAttributes = (e) =>{ console.log(e.target.dataset.id,e.target.dataset.url) // 1 https//www.baidu.com
 } render() { return ( <div>
        <p data-id="1" data-url="https//www.baidu.com" onClick={this.handleClickGetAttributes}>react获取自定义属性</p>
        <button onClick={this.handleClick.bind(this,'bob')}>Click Bar</button>
      </div>
 ) } } // 怎样阻止函数被调用太快或者太多次? 节流 防抖 lodash库提供了节流和防抖的函数 npm i lodash -S 安装
class LoadMore extends React.Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); this.handleClickThrottled = _.throttle(this.handleClick, 1000); } // _.debounce、_.throttle 和 raf-schd 都提供了一个 cancel 方法来取消延迟回调。你需要在 componentWillUnmount 中调用该方法，或者对代码进行检查来保证在延迟函数有效期间内组件始终挂载
 componentWillUnmount() { this.handleClickThrottled.cancel(); } render() { return <button onClick={this.handleClickThrottled}>Load More</button>;
 } handleClick() { console.log(111) // 使其每秒钟的只能调用一次
 } } // 防抖确保函数不会在上一次被调用之后一定量的时间内被执行。当必须进行一些费时的计算来响应快速派发的事件时（比如鼠标滚动或键盘事件时），防抖是非常有用的
class Searchbox extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.emitDebounced = _.debounce(this.emitChange, 1000); } componentWillUnmount() { this.emitDebounced.cancel(); } render() { return ( <input type="text" onChange={this.handleChange} placeholder="Search..." defaultValue={this.props.value} />
 ); } handleChange(e) { this.emitDebounced(e.target.value); } emitChange(value) { console.log(value,'value') // 1s 的延迟来改变文本输入
 } }