react 工具包

1.react-document-title 修改title标签内容

DocumentTitle只能有一个根节点，

标签title的内容由最内层的DocumentTitle标签决定

import React, { Component } from 'react';
import DocumentTitle from 'react-document-title';

class NewArticlePage extends React.Component {
  constructor(props) {
    super(props);
    this.state = { title: 'Untitled' };
  }

  render() {
    // Update using value from state while this component is mounted
    return (
      <DocumentTitle title={this.state.title}>
        <div>
          <h1>New Article</h1>
          <input
            value={this.state.title}
            onChange={(e) => this.setState({ title: e.target.value })}
          />
        </div>
      </DocumentTitle>
    );
  }
}
class App extends Component {
  render() {
    return (
    	 <DocumentTitle title='My Web App'>
    	 	<NewArticlePage/>
    	 </DocumentTitle>
    );
  }
}

export default App;

2. classname

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

3.react-container-query

当屏幕的宽度在不同的范围内时，都会执行一次。当屏幕宽度在400和599之间时，params的值

{
  'width-between-400-and-599': true,
  'width-larger-than-600': false
}

classname(params)的值就是字符串 width-between-400-and-599

import React, {Component} from 'react';
import {render} from 'react-dom';
import {ContainerQuery} from 'react-container-query';
import classnames from 'classnames';

const query = {
  'width-between-400-and-599': {
    minWidth: 400,
    maxWidth: 599
  },
  'width-larger-than-600': {
    minWidth: 600,
  }
};

function MyComponent() {
  /**
   * `params` in the children function will look like
   * {
   *   'width-between-400-and-599': true,
   *   'width-larger-than-600': false
   * }
   */
  return (
    <ContainerQuery query={query}>
      {(params) => (
        <div className={classnames(params)}>the box</div>
      )}
    </ContainerQuery>
  );
};

/**
 * This will generate following HTML:
 * <div class="width-between-400-and-599"></div>
 */

render(<MyComponent/>, document.getElementById('app'));

4.memoize-one

避免重复计算，只记忆最后一次的参数和结果。

import memoizeOne from 'memoize-one';

const add = (a, b) => a + b;
const memoizedAdd = memoizeOne(add);

memoizedAdd(1, 2); // 3

memoizedAdd(1, 2); // 3
// Add function is not executed: previous result is returned

如果参数是JSON对象，两次都是{name:"Jack"},第二次应该返回以前的结果，但是两个参数{name:"Jack"}地址不同，此时要其他函数对两次的参数进行深层比较

import memoizeOne from 'memoize-one';
import deepEqual from 'lodash.isEqual';

const identity = x => x;

const defaultMemoization = memoizeOne(identity);
const customMemoization = memoizeOne(identity, deepEqual);

const result1 = defaultMemoization({foo: 'bar'});
const result2 = defaultMemoization({foo: 'bar'});

result1 === result2 // false - difference reference

const result3 = customMemoization({foo: 'bar'});
const result4 = customMemoization({foo: 'bar'});

result3 === result4 // true - arguments are deep equal

5.enquire.js：响应式，一个状态过渡到另一个状态时，执行相应的函数。

enquire.register("screen and (max-width:1000px)", {

  match : function() {console.log("match")},      // OPTIONAL
                              // If supplied, triggered when the media query transitions
                              // *from an unmatched to a matched state*

  unmatch : function() {console.log("unmatch")},    // OPTIONAL
                              // If supplied, triggered when the media query transitions
                              // *from a matched state to an unmatched state*.
                              // Also may be called when handler is unregistered (if destroy is not available)

});

猜你喜欢