这是一篇没有太多解释的记录

[lishengzxc]

trafficstars

看不懂的可以去搜关键字，😝

Set

	Array	Set
元素序列	有序	无序
元素可重复性	可	不可

遍历

const set = new Set([1, 2, 3]);
set.forEach(function(i) {
	console.log(i * this.foo)
}, { foo: 2 })

数组去重

[...new Set([1,1,2,2])]

WeakSet

Weak 版本的数据类型是无法包含无引用的元素的，一旦数据结构内的任一元素的引用被解除，该元素就会被移除当前所在的数据结构。

const weakset = new WeakSet();
weakset.add(1)
weakset.add({ foo: 1 })

let bar = { baz: 1 };
weakset.add(bar);

bar = null

Map

key 可以是任意类型

new Map([['foo', 1], ['bar', 2]])

WeakMap

const weakmap = new WeakMap();
let keyObj = { id: 1 };
let valObj = { score: 100 };

weakmap.set(keyObj, valObj);
keyObj = null

解构

多返回值

function getSome() {
	return {
		a: 1,
		b: 2,
		c: 3
	}
}

let { a, b, c} = getSome()

别名

function fetch() {
	return {
		res: [...]
	}
}

let { res: data } = fetch()

缺省

const { foo, bar } = { foo: 1 }
console.log(bar)

const [ a, b = 2 ] = [ 1 ]
console.log(a, b)

...

解构传参

Math.min.apply(null, [1,2,3])
Math.min(...[1,2,3])

对象拓展

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };

let ab = { ...a, ...b };
// 等同于
let ab = Object.assign({}, a, b);

ReactDOM.unstable_renderSubtreeIntoContainer

renderSubtreeIntoContainer(parentComponent, nextElement, container, callback);

class Lay extends Component {
    appendMaskIntoDoc() {
        ReactDOM.unstable_renderSubtreeIntoContainer(
            this,
            this.props.children,
            this.container
        )
    }

    componentDidMount() {
        this.container = document.createElement('div')
        document.body.appendChild(this.container)
        this.appendMaskIntoDoc()
    }

    componentDidUpdate() {
        this.appendMaskIntoDoc()
    }

    componentWillUnmount() {
        document.body.removeChild(this.container)
    }

    render() {
        return null
    }
}
<Lay>
	<Modal>
		我是内容
	</Modal>
</Lay>

*Dialog

/src/components/public/Dialog

let Alert = {
  show(config) {
    let instance;
    const container = document.createElement('div');
    const unMount = () => {
      if (config && config.afterClose && typeof config.afterClose === 'function') {
        config.afterClose();
      }
      ReactDOM.unmountComponentAtNode(container);
      document.body.removeChild(container);
    };
    document.body.appendChild(container);
    ReactDOM.render(<AXDialog {...config} afterClose={unMount} />, container, function () {
      instance = this;
    });
    return instance;
  },

context

class Button extends React.Component {
  render() {
    return (
      <button style={{background: this.context.color}}>
        {this.props.children}
      </button>
    );
  }
}

Button.contextTypes = {
  color: React.PropTypes.string
};

class Message extends React.Component {
  render() {
    return (
      <div>
        {this.props.text} <Button>Delete</Button>
      </div>
    );
  }
}

class MessageList extends React.Component {
  getChildContext() {
    return {color: "purple"};
  }

  render() {
    const children = this.props.messages.map((message) =>
      <Message text={message.text} />
    );
    return <div>{children}</div>;
  }
}

MessageList.childContextTypes = {
  color: React.PropTypes.string
};