[javascript] React를 사용한 큰 목록 성능

우선, React의 개발 버전과 프로덕션 버전의 차이가 큽니다. 프로덕션에서는 우회 된 온 전성 검사 (예 : prop 유형 확인)가 많기 때문입니다.

그런 다음 Redux 사용을 재고해야한다고 생각합니다. 필요한 사항 (또는 모든 종류의 플럭스 구현)에 매우 유용 할 것이기 때문입니다. 이 프레젠테이션을 확실히 살펴 봐야합니다 : Big List High Performance React & Redux .

그러나 redux에 뛰어 들기 전에 컴포넌트를 더 작은 컴포넌트로 분할하여 React 코드를 약간 조정해야합니다. 왜냐하면 shouldComponentUpdate완전히 자식 렌더링을 우회 할 것이기 때문에 엄청난 이득 입니다.

더 세분화 된 구성 요소가있는 경우 redux 및 react-redux로 상태를 처리하여 데이터 흐름을 더 잘 구성 할 수 있습니다.

나는 최근 1,000 개의 행을 렌더링하고 내용을 편집하여 각 행을 수정할 수 있어야 할 때 비슷한 문제에 직면했습니다. 이 미니 앱은 잠재적 중복 콘서트가있는 콘서트 목록을 표시하며, 확인란을 선택하여 잠재적 중복을 원래 콘서트 (복제 아님)로 표시하려면 각 잠재적 중복을 선택해야하며, 필요한 경우 편집합니다. 콘서트 이름. 특정 잠재적 중복 항목에 대해 아무것도하지 않으면 중복 항목으로 간주되어 삭제됩니다.

다음은 다음과 같습니다.

기본적으로 4 개의 전원 구성 요소가 있습니다 (여기에는 행이 하나만 있지만 예제를위한 것입니다).

다음은 redux , react-redux , immutable , reselect 및 recompose를 사용 하는 전체 코드 (Working CodePen : Huge List with React & Redux )입니다 .

const initialState = Immutable.fromJS({ /* See codepen, this is a HUGE list */ })

const types = {
    CONCERTS_DEDUP_NAME_CHANGED: 'diggger/concertsDeduplication/CONCERTS_DEDUP_NAME_CHANGED',
    CONCERTS_DEDUP_CONCERT_TOGGLED: 'diggger/concertsDeduplication/CONCERTS_DEDUP_CONCERT_TOGGLED',
};

const changeName = (pk, name) => ({
    type: types.CONCERTS_DEDUP_NAME_CHANGED,
    pk,
    name
});

const toggleConcert = (pk, toggled) => ({
    type: types.CONCERTS_DEDUP_CONCERT_TOGGLED,
    pk,
    toggled
});


const reducer = (state = initialState, action = {}) => {
    switch (action.type) {
        case types.CONCERTS_DEDUP_NAME_CHANGED:
            return state
                .updateIn(['names', String(action.pk)], () => action.name)
                .set('_state', 'not_saved');
        case types.CONCERTS_DEDUP_CONCERT_TOGGLED:
            return state
                .updateIn(['concerts', String(action.pk)], () => action.toggled)
                .set('_state', 'not_saved');
        default:
            return state;
    }
};

/* configureStore */
const store = Redux.createStore(
    reducer,
    initialState
);

/* SELECTORS */

const getDuplicatesGroups = (state) => state.get('duplicatesGroups');

const getDuplicateGroup = (state, name) => state.getIn(['duplicatesGroups', name]);

const getConcerts = (state) => state.get('concerts');

const getNames = (state) => state.get('names');

const getConcertName = (state, pk) => getNames(state).get(String(pk));

const isConcertOriginal = (state, pk) => getConcerts(state).get(String(pk));

const getGroupNames = reselect.createSelector(
    getDuplicatesGroups,
    (duplicates) => duplicates.flip().toList()
);

const makeGetConcertName = () => reselect.createSelector(
    getConcertName,
    (name) => name
);

const makeIsConcertOriginal = () => reselect.createSelector(
    isConcertOriginal,
    (original) => original
);

const makeGetDuplicateGroup = () => reselect.createSelector(
    getDuplicateGroup,
    (duplicates) => duplicates
);



/* COMPONENTS */

const DuplicatessTableRow = Recompose.onlyUpdateForKeys(['name'])(({ name }) => {
    return (
        <tr>
            <td>{name}</td>
            <DuplicatesRowColumn name={name}/>
        </tr>
    )
});

const PureToggle = Recompose.onlyUpdateForKeys(['toggled'])(({ toggled, ...otherProps }) => (
    <input type="checkbox" defaultChecked={toggled} {...otherProps}/>
));


/* CONTAINERS */

let DuplicatesTable = ({ groups }) => {

    return (
        <div>
            <table className="pure-table pure-table-bordered">
                <thead>
                    <tr>
                        <th>{'Concert'}</th>
                        <th>{'Duplicates'}</th>
                    </tr>
                </thead>
                <tbody>
                    {groups.map(name => (
                        <DuplicatesTableRow key={name} name={name} />
                    ))}
                </tbody>
            </table>
        </div>
    )

};

DuplicatesTable.propTypes = {
    groups: React.PropTypes.instanceOf(Immutable.List),
};

DuplicatesTable = ReactRedux.connect(
    (state) => ({
        groups: getGroupNames(state),
    })
)(DuplicatesTable);


let DuplicatesRowColumn = ({ duplicates }) => (
    <td>
        <ul>
            {duplicates.map(d => (
                <DuplicateItem
                    key={d}
                    pk={d}/>
            ))}
        </ul>
    </td>
);

DuplicatessRowColumn.propTypes = {
    duplicates: React.PropTypes.arrayOf(
        React.PropTypes.string
    )
};

const makeMapStateToProps1 = (_, { name }) => {
    const getDuplicateGroup = makeGetDuplicateGroup();
    return (state) => ({
        duplicates: getDuplicateGroup(state, name)
    });
};

DuplicatesRowColumn = ReactRedux.connect(makeMapStateToProps1)(DuplicatesRowColumn);


let DuplicateItem = ({ pk, name, toggled, onToggle, onNameChange }) => {
    return (
        <li>
            <table>
                <tbody>
                    <tr>
                        <td>{ toggled ? <input type="text" value={name} onChange={(e) => onNameChange(pk, e.target.value)}/> : name }</td>
                        <td>
                            <PureToggle toggled={toggled} onChange={(e) => onToggle(pk, e.target.checked)}/>
                        </td>
                    </tr>
                </tbody>
            </table>
        </li>
    )
}

const makeMapStateToProps2 = (_, { pk }) => {
    const getConcertName = makeGetConcertName();
    const isConcertOriginal = makeIsConcertOriginal();

    return (state) => ({
        name: getConcertName(state, pk),
        toggled: isConcertOriginal(state, pk)
    });
};

DuplicateItem = ReactRedux.connect(
    makeMapStateToProps2,
    (dispatch) => ({
        onNameChange(pk, name) {
            dispatch(changeName(pk, name));
        },
        onToggle(pk, toggled) {
            dispatch(toggleConcert(pk, toggled));
        }
    })
)(DuplicateItem);


const App = () => (
    <div style={{ maxWidth: '1200px', margin: 'auto' }}>
        <DuplicatesTable />
    </div>
)

ReactDOM.render(
    <ReactRedux.Provider store={store}>
        <App/>
    </ReactRedux.Provider>,
    document.getElementById('app')
);

방대한 데이터 세트로 작업 할 때이 미니 앱을 통해 얻은 교훈

• React 구성 요소는 작게 유지 될 때 가장 잘 작동합니다.
• Reselect는 재 계산을 피하고 동일한 인수가 주어지면 동일한 참조 객체 (immutable.js를 사용할 때)를 유지하는 데 매우 유용합니다.
• connect구성 요소가 사용하지 않는 소품 만 전달하지 않도록하기 위해 필요한 데이터와 가장 가까운 구성 요소에 대한 ed 구성 요소를 만듭니다.
• ownProps쓸모없는 재 렌더링을 피하기 위해 주어진 초기 prop 만 필요할 때 mapDispatchToProps를 만들기 위해 fabric 함수를 사용합니다.
• React & redux는 확실히 함께 흔들립니다!