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>
        )
    }
}

複製代碼