React中如何减少props改变-创新互联

class ClickMe extends React.Component {
  state = {
    value: '3333',
  };

  render() {
    return (
       {
          console.log('l am clicked!', this.state.value);
        }}
      >
        click me
      
    )
  }
}

class ClickMe extends React.Component {
  state = {
    value: '3333',
  };

  handleClick = () => {
    console.log('l am clicked!', this.state.value);
  };

  render() {
    return (
      
        click me
      
    )
  }
}

// 或
class ClickMe extends React.Component {
  constuctor(props) {
    super(props);
    this.state = {
      value: '3333',
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log('l am clicked!', this.state.value);
  }

  render() {
    return (
      
        click me
      
    )
  }
}

class MultiClick extends React.Component {
  dataSource = [
    { key: '1', value: '1' },
    { key: '2', value: '2' },
    { key: '3', value: '3' },
    { key: '4', value: '4' },
  ];

  handleClick = key => {
    console.error('key:', key);
  };

  render() {
    return (
      

        {this.dataSource.map(item => (
          
 {
              this.handleClick(item.key);
            }}
          >
            {item.value}
          
        ))}
      
    );
  }
}

cacheMap = {};

genClickHandler = key => {
  if (!this.cacheMap[key]) {
    this.cacheMap[key] = () => {
      console.error('key:', key);
    };
  }
  return this.cacheMap[key];
};

// 绑定

  {item.value}

如果多个基本类型的参数可以，将他们拼接成字符串作为cacheMap的key，简单的引用类型可以使用JSON.stringify，不过原则上作为事件绑定的函数 传递的参数简单为好。

作为配置的props缓存

说到数据的缓存，不管光是事件的回调，还有很多 其他情况。比如表格的 columns需要根据属性变化的这种场景：

class TableDemo extends React.Component {
  getColumns = () => {
    const { name } = this.state;
    return [
      {
        key: '1',
        title: `${name}_1`,
      },
      {
        key: '2',
        title: `${name}_2`,
      },
    ];
  };

  render() {
    const { dataSource } = this.props;
    return ;
  }
}

这种情况每次组件render的时候，getColumns都会被调用一次，而这个函数每次的返回值都是不一样的 ，及时这两次的name值都相等，原因大家可以类比[] !== []这里就不过多叙述了。

有一种做法是，将columns作为一个this.state的一个属性，在初始化和每次 this.state.name改变的时候同步改变this.state.columns的值，但如果有多个 类似于this.state.name的变量控制this.state.columns的值时候，发现每个变量变化的时候都要调用生成columns的方法， 十分的烦琐易造成错误。

使用缓存可以很好的解决这个问题，在参数较为复杂的时候，我们选择只缓存上一次的值。先看代码再说：

首先我们写一个缓存的函数

function cacheFun(cb) {
  let preResult = null
  let preParams = null
  const equalCb = cb || shallowEqual
  return (fun, params) => {
    if (preResult && equalCb(preParams, params)) {
      return preResult
    }
    preResult = fun(params)
    preParams = params
    return preResult
  }
}

这个缓存函数是一个闭包函数，保存了上一次的参数和上一次的结果，主要的实现就是比较两次的参数，相同则返回上一次结果，不同则返回 调用函数的新结果。当然 对于某些特殊的情况只需要根据传入特定的某几个参数做出判断，这种情况你可以传入自定义的比较函数。先看一下上面的实现：

cacheFun函数第一个参数为选填的选项，是你比较两次参数的 方法，如果你不传入则仅进行 浅比较（与 React 的浅比较相似）。

返回函数的第一个参数为你的 生成columns的回调，params 为你需要的 变量，如果你的变量比较多，你可以将他们 作为一个对象传入；那么代码就类似如下：

const params = { name, time, handler };
cacheFun(this.getColumns, params, cb);

在类中的使用为：

class TableDemo extends React.Component {
  getColumns = name => {
    return [
      {
        key: '1',
        title: `${name}_1`,
      },
      {
        key: '2',
        title: `${name}_2`,
      },
    ];
  };

  getColumnsWrapper = () => {
    const { name } = this.state;
    return cacheFun()(this.getColumns, name);
  };

  render() {
    const { dataSource } = this.props;
    return (
      
    );
  }
}

假如你不喜欢对象的传值方式，那你可以 对这个缓存函数进行更改：

function cacheFun(cb) {
  let preResult = null;
  let preParams = null;
  const equalCb = cb || shallowEqual;
  return (fun, ...params) => {
    if (preResult) {
      const isEqual = params.ervey((param, i) => {
        const preParam = preParams && preParams[i];
        return equalCb(param, preParam);
      });
      if (isEqual) {
        return preResult;
      }
    }
    preResult = fun(params);
    preParams = params;
    return preResult;
  };
}

你这可以这样使用：

cacheFun()(this.getColumns, name, key, param1, params2);
// 或者
cacheFun()(this.getColumns, name, key, { param1, params2 });

这样配置也就被缓存优化了，当TableDemo组件因非name属性render时，这时候你的columns还是返回上一次缓存的值，是的Table这个组件减少了一次因columns引用不同产生的render。如果Table的dataSource数据量很大，那这次对应用的优化就很可观了。

数据的缓存

数据的缓存在原生的内部也有使用cacheFun的场景，如对于一个list 根据 searchStr模糊过滤对于的subList。

大致代码如下：

class SearchList extends React.Component {
  
  state = {
    list: [
      { value: '1', key: '1' },
      { value: '11', key: '11' },
      { value: '111', key: '111' },
      { value: '2', key: '2' },
      { value: '22', key: '22' },
      { value: '222', key: '222' },
      { value: '2222', key: '2222' },
    ],
    searchStr: '',
  }

  // ...

  render() {
    const { searchStr, list } = this.state
    const dataSource = list.filter(it => it.indexOf(searchStr) > -1)
    return (
      

        
        
      
    )
  }
}

对于此情景的优化使用cacheFun也可以实现

const dataSource = cacheFun()((plist, pSearchStr) => {
  return plist.filter(it => it.indexOf(pSearchStr) > -1)
}, list, searchStr)

但是有大量的类似于此的衍生值的时候，这样的写法又显得不够。社区上出现了许多框架如配合react-redux使用reselect（当然也可以单独使用，不过配合redux使用简直就是前端数据管理的一大杀手锏），还有mobx的衍生概念等。这些后续会单独介绍，这里就稍微提一下。

感谢你能够认真阅读完这篇文章，希望小编分享的“React中如何减少props改变”这篇文章对大家有帮助，同时也希望大家多多支持创新互联成都网站设计公司，关注创新互联成都网站设计公司行业资讯频道，更多相关知识等着你来学习!

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、网站设计器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。