Question

我正在创建一个有条件流的反应表单。例如，选择某些选择选项时，可能会隐藏两个输入字段。基于选择选项创建状态并使输入元素的可见性依赖于当前状态是一个好主意。或者我应该在输入元素中添加refs并使select导致更改事件，该事件将用于操纵输入的可见性？

Answer 1

除非您有任何复杂的逻辑来决定是否绘制输入，否则我认为将其简单地绑定到某个状态变量是完全正常的，甚至是鼓励的。以下是使用Reacts双向绑定插件的示例：

var MyForm = React.createClass({
    mixins: [React.addons.LinkedStateMixin],

    getInitialState: function() {
        return {hasName: false};
    },

    render: function() {
        var nameInput = null;
        if (this.state.hasName) {
            nameInput = <label>
                Name:
                <input type="text" />
            </label>;
        }

        return <form>
            <label>
                <input type="checkbox" checkedLink={this.linkState('hasName')} />
                Do you have a name?
            </label>
            <br/>
            {nameInput}
       </form>;
    }
});

React.render(<MyForm/>, document.body);

http://jsfiddle.net/p4u1qhym/

当你使用事件处理程序时，你仍然应该为输入设置一个状态变量：尽管React足够聪明，可以在重新渲染期间保持任何DOM状态不变（例如visibility样式选项），它不会一直有效。想象一下，例如，您在序列化表单状态并希望稍后使用它来初始化另一个表单的情况。 React将无法推断出不应显示名称输入，并将其呈现。

但仍然存在使用this.refs时有用的情况，例如将焦点设置为特定输入时，如here所述。

从问题的标题我假设你担心性能：是的，整个组件将被重新渲染，但仅限于虚拟DOM 。然后React找到与实际DOM的所有差异，并仅应用两者所需的更改来匹配。你可以阅读它here。由于整个过程非常有效，因此使用this.refs在实际DOM节点上设置某些样式属性时，性能几乎没有差异。而且它的冗长要少得多！

React：状态更改会导致整个组件重绘吗？

1 个答案: