Javascript 反应：状态更改是否会导致重新绘制整个组件？

我正在react中创建一个具有条件流的表单。例如，当选择某个选择选项时，可能会隐藏两个输入字段。基于选择选项创建状态并使输入元素的可见性取决于当前状态是否是一个好主意。或者我应该将引用添加到输入元素中，并使select cause成为一个更改事件，该事件将用于操纵输入的可见性？

除非您有任何复杂的逻辑来决定是否绘制输入，我认为将其与某个状态变量绑定是非常好的，甚至是值得鼓励的。下面是一个使用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);

var MyForm=React.createClass({
mixin:[React.addons.LinkedStateMixin]，
getInitialState:函数（）{
返回{hasName:false}；
},
render:function（）{
var nameInput=null；
if（this.state.hasName）{
名称输入=
姓名：
;
}
返回
你有名字吗？


{nameInput}
;
}
});
React.render（，document.body）；

当您使用事件处理程序时，您仍然应该为输入设置一个状态变量：即使React足够智能，可以在重新呈现期间保持任何DOM状态不变（例如

可见性
样式化选项），它也不会始终起作用。例如，假设您序列化表单状态，并希望稍后使用它初始化另一个表单。React将无法推断不应显示名称输入，并对其进行渲染

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

根据问题的标题，我假设您担心性能：是的，整个组件将被重新呈现，但仅在虚拟DOM中。然后，React将查找实际DOM的所有差异，并仅应用两者匹配所需的更改。你可以读到它。由于整个过程非常高效，因此使用
this.refs
在实际DOM节点上设置某些样式属性在性能上应该没有任何差异。而且它也不那么冗长了
 非常感谢。解释得很好！