我什么时候应该用 React.js 状态而不是 CSS 来更新 UI？

Question

我正在从这个site 重新创建一个输入示例。当您在输入中单击时，充当占位符的标签向上移动并充当标签。此操作在 CSS 中完成。表单的数据没有更新，但是UI在变化，这算不算状态变化？ CSS 中的更改应该保持 CSS 不变，还是应该由 React 组件中的某些内容触发？

有一个例子，JSFiddle 没有 React。

JS：

function generate_adaptive_text_input(initial, focused){
    var adaptive_placeholder_input_container = $("<div />", {
        class: 'adaptive_placeholder_input_container'
    });
        var adaptive_placeholder_input = $("<input />",{
            type: 'text',
            required: '',
            class: 'adaptive_text_input'
        });
        var adaptive_placeholder_label = $("<label />",{
            alt: initial,
            placeholder: focused,
            class: 'adaptive_placeholder'
        });
        adaptive_placeholder_input_container.append(adaptive_placeholder_input);
        adaptive_placeholder_input_container.append(adaptive_placeholder_label);
    return adaptive_placeholder_input_container;
}

function generate_form(){
    var form = $('<form />');
        var first_example = generate_adaptive_text_input('Placeholder', 'Active Placeholder');
        var second_example = generate_adaptive_text_input('Off', 'On');


        $(form).append(first_example);
        $(form).append(second_example);
    return form;
}    

function generate_page(){
    var form = generate_form();
    $('body').append(form);
}

CSS：

.adaptive_placeholder_input_container {
    position: relative;
}
.adaptive_text_input {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 200px;
    height: 40px;
    border: 3px solid #aaaaaa;
    border-radius: 10px;
    margin: 0 0 1em;
    padding: 1em;
    background: #fff;
    resize: none;
    outline: none;
}
.adaptive_text_input:focus {
    border-color: #00bafa;
}
.adaptive_text_input:focus + .adaptive_placeholder:before {
    color: #00bafa;
}
.adaptive_text_input:focus + .adaptive_placeholder:before, .adaptive_text_input:valid + .adaptive_placeholder:before {
    -webkit-transition-duration: .2s;
    -webkit-transform: translate(0, -16px) scale(0.9, 0.9);
}
.adaptive_text_input:invalid + .adaptive_placeholder:before {
    content: attr(alt);
}
.adaptive_text_input + .adaptive_placeholder {
    pointer-events: none;
    line-height: 1em;
    position: absolute;
    left: 10px;
    top: 10px;
}
.adaptive_text_input + .adaptive_placeholder:before {
    font-family: Verdana, Geneva, sans-serif;
    content: attr(placeholder);
    display: inline-block;
    padding: 0 2px;
    color: #898989;
    -webkit-transition: 0.3s ease-in-out;
    background-color: #ffffff;
}

Answer 1

我通常会从另一个方向考虑状态；而不是说，“此 UI 更新是否算作状态更改”，我认为“此 UI 更新是否需要更改状态才能正常工作。”答案是肯定的，如果：

1. 我需要依赖我的render 函数中的一些数据来有条件地应用某个类。
2. 需要向应用程序的其他部分传达 UI 看起来不同的事实（即 UI 处于特定的状态）。

如果这两个问题的答案都是“否”，我认为将 UI 更改完全保留在 CSS 中是完全有效的。

Answer 2

我同意布兰登所说的。

考虑这个例子：

在某些时候，您可能希望某些操作（快捷键）根据关注的内容产生不同的结果。然后焦点对象成为你的状态的一部分。

如果这种情况永远不会发生，您可以使用纯 CSS 解决方案。