在事件处理程序中使用 ReactDOM.render 以避免渲染昂贵的组件

Question

我有一个 React 应用程序，其中包含一个任务列表，每个任务都有截止日期。我希望用户能够单击截止日期以弹出一个日期选择器来选择一个新的。

我正在使用材质UI库http://www.material-ui.com/#/components/date-picker

我可以简单地在列表中的每个任务上呈现一个日期选择器，但似乎它可能会在长列表上导致性能问题，以便在每个项目上呈现如此复杂的组件。我宁愿只显示截止日期，并且只在用户单击更改截止日期时呈现日期选择器。

这是我想出的解决方案：

TaskFooter = React.createClass({
    propTypes: {
        task: React.PropTypes.object.isRequired
    },
    onDateChanged(e, newDate){
        // handle data update
    },
    showDatePicker(){
        let dp = ReactDOM.render(
            <MUI.DatePicker autoOk={true} textFieldStyle={{display: 'none'}} onChange={this.onDateChanged} />,
            this.refs.datePickerContainer
        );
        dp.openDialog();
    },
    render() {

        return (
                <div onClick={this.showDatePicker}>
                    <MUI.Libs.SvgIcons.ActionEvent />
                    {this.props.task.duedate}
                    <div ref="datePickerContainer"></div>
                </div>
        );
    }
});

这似乎可行，但我想知道这种模式是否是执行此操作的“正确”方式。有没有更好的方法来动态呈现可能昂贵的 React 组件以响应事件？

编辑： 我找到了另一种看起来更“反应”的方法，但我不确定它是否完全正确。

TaskFooter = React.createClass({
    propTypes: {
        task: React.PropTypes.object.isRequired
    },
    getInitialState(){
        return {
            showDatePicker: false
        }
    },
    componentDidUpdate(prevProps, prevState){
        if(this.state.showDatePicker && !prevState.showDatePicker){
            this.refs.datePicker.openDialog();
        }
    },
    onDateChanged(e, newDate){
        console.log('new date', newDate);
        this.setState({
            showDatePicker: false
        });
    },
    showDatePicker(){
        this.setState({
            showDatePicker: true
        });
    },
    render() {

        return (
                <div onClick={this.showDatePicker}>
                    <MUI.Libs.SvgIcons.ActionEvent />
                    {this.props.task.duedate}
                    { this.state.showDatePicker ?
                        <MUI.DatePicker autoOk={true} textFieldStyle={{display: 'none'}} onChange={this.onDateChanged} ref="datePicker" />
                    : ''}
                </div>
        );
    }
});

这可以正确显示和隐藏日期选择器，但是在设置关闭状态时，我在控制台中收到以下警告：

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the DatePickerDialog component.

尽管有此警告，但似乎状态已正确设置在我的组件上。我应该忽略这个警告吗？我的新模式正确吗？

Answer 1

仅在安装 React 应用时使用 ReactDOM.render()。它永远不应该在 React 组件本身中使用。

让自己熟悉 state 的工作原理。我建议如下：

TaskFooter = React.createClass({
    propTypes: {
        task: React.PropTypes.object.isRequired
    },
    getInitialState() {
        return {
            displayDatePicker: false
        };
    }
    onDateChanged(e, newDate) {
        // handle data update
    },
    showDatePicker() {
        this.setState({
            displayDatePicker: false
        });
    }
    componentDidUpdate(prevProps, prevState) {
        // this is a little bit hacky,
        // ideally there would be a prop for DatePicker to instruct it to already be open
        if (this.state.displayDatePicker && !prevState.displayDatePicker) {
            this.refs.dp.openDialog();
        }
    },
    render() {

        return (
            <div onClick={this.showDatePicker}>
                <MUI.Libs.SvgIcons.ActionEvent />
                {this.props.task.duedate}
                {this.state.displayDatePicker ? (
                    <MUI.DatePicker
                        ref="dp"
                        autoOk={true}
                        textFieldStyle={{display: 'none'}}
                        onChange={this.onDateChanged}
                    />
                ) : null}
            </div>
        );
    }
});

这以更简洁的方式实现了同样的目标。状态变量displayDatePicker 确定日期选择器是否显示。我还使用componentDidUpdate() 来检测日期选择器何时被激活。

还有一件事。我认为您应该质疑您的假设，即默认显示日期选择器必然会产生性能问题。你知道是这样吗？我担心您可能会以增加代码复杂性来换取微不足道的性能提升。