20191101 react 状态提升很重要

最近接触了一些项目，发现开发的时候各种各样的setState，如果不注意场合的去使用，会造成不必要的更新，有可能会产生一些bug。所以明确一个组件的状态到底受不受自己控制很重要。

1. 父组件的state是子组件的props，那么子组件就没有必要内部管理state，或者内部的state没有必要和props产生关联
2. 通过事件将子组件的state传到父组件，如果父组件的state发生变化，那发生变化的state如果作为子组件的props，那就不应该再和子组件的state产生关系。
3. 时刻牢记以上两点很重要 。。。

import React from 'react';

/**
 * checkboxList
 * - props
 *  - values 选中的项目
 *  - list 显示的数据
 *  - onChange  状态变化时候的回调
 */
class CheckboxList extends React.Component {

    state = {
        checkedList: [],
    }

    getCheckedList = (values, item) => {
        if (values.includes(item)) {
            return values.filter(d => d !== item).filter(Boolean);
        } else {
            return [...values, item].filter(Boolean);
        }
    }

    _checkHandle = (item) => {
        if (this.props.values) {
            const propsSelectedList = this.getCheckedList(this.props.values, item);
            this.props.onChange && this.props.onChange(propsSelectedList);
        } else {
            const checkedList = this.getCheckedList(this.state.checkedList, item);
            this.setState({
                checkedList: checkedList
            }, () => {
                this.props.onChange && this.props.onChange(checkedList);
            });
        }
    };

    render() {
        const list = this.props.list
        const checkedList = this.props.values || this.state.checkedList;
        let verifyInclude = d => checkedList.includes(d);
        return (
            <ul>
                {list.map(d => {
                    return (
                        <li key={d.value}>
                            <label name={'check'} style={{ cursor: 'pointer' }}>
                                <input
                                    type="checkbox"
                                    checked={verifyInclude(d)}
                                    value={d.value}
                                    onChange={this._checkHandle.bind(this, d)} />
                                {d.label}
                            </label>
                        </li>
                    )
                })}
            </ul>
        )
    }
}

export default class Component extends React.Component {
    state = {
        values: [],
    }

    checkboxChangedHandle = (checkedList) => {
        this.setState({
            values: checkedList,
        })
    }

    list = [
        'aa', 'bb', 'cc', 'dd'
    ].map((d, i) => {
        return {
            label: d,
            value: i
        };
    });

    render() {
        return (
            <div style={{ border: '1px solid', width: '200px', height: '200px' }}>
                <CheckboxList
                    list={this.list}
                    values={this.state.values}
                    onChange={this.checkboxChangedHandle} />
            </div>
        )
    }
}