何时在 Preact 子组件中使用 Props 以及何时使用 State

Question

我正在学习 preact，但这也可能与 React 有关。

假设我有一个复选框列表，每个复选框都有一些额外的 HTML，像这样 (Typescript):

export class MyCheckbox extends Component<Props, State> {

    render(props, state) {
        return (
            <div>
                <input
                    type="checkbox"
                    checked={state.checked}
                    onChange={props.onUpdate}
                    />
                <div>
                    {props.name}
                    <!-- other GUI elements -->
                </div>
            </div>
        );
    }
}

然后，这些组件在更高级别的组件中使用，如下所示：

render(props, state) {

    return (
        <div class={style.finding}>
            <form>
                { this.elements
                    .map(el => (
                        <MyCheckbox name={el.name} checked={el.checked} onUpdate={this.onUpdate()} />
                    ))
                }
            </form>
        </div>        
    </div>
);

如您所见，更高级别的组件告诉复选框是否应该选中它。所以checkbox的Props对象上面有一个属性checked，决定checkbox可见时是否要勾选

但是，我们还需要 State 上的 checked 属性，因为用户可能会单击复选框并因此更新它。所以 Props.checked 表示 "initially checked" 而 State.checked 表示 "currently checked".

但是如果用户单击复选框，onUpdate 方法将更新更高级别组件上的 this.elements 模型。这将在更高级别的组件上触发 render()，后者又将新的 Props.checked 传递给复选框。

这意味着，复选框的 Props 将像一个状态一样起作用。当用户单击复选框时它会更新，然后新状态将传递给复选框。

这正常吗？还是我的设计有问题？子组件是否需要状态？

Answer 1

通常的方法是应用有状态parent和无状态child模式。

在您的情况下 MyCheckbox 应该是无状态的（不应包含 checked 状态变量）并且选中的值应该是属性.

检查值的状态应该由parent状态处理。

export class MyCheckbox extends Component<Props, State> {
    render(props, state) {
        return (
            <div>
                <input
                    type="checkbox"
                    checked={props.checked}
                    onChange={props.onUpdate} />
                <div>
                    {props.name}
                    <!-- other GUI elements -->
                </div>
            </div>
        );
    }
}

parent:

export class Parent extends Component<Props, State> {
    ...
    render(props, state) {
        return (
            <div class={style.finding}>
                <form>
                    { this.elements
                        .map(el => (
                            <MyCheckbox name={el.name} checked={this.isChecked(el)} onUpdate={this.onUpdate()} />
                        ))
                    }
                </form>
            </div>        
        </div>
    );

    isChecked(elem) {
        // use this.state to verify to return a boolean representing the checkbox checked state
    }
}

使组件无状态总是好的。拥有表示组件相同方面的 prop 和 state 值有点难看。

希望对您有所帮助

何时在 Preact 子组件中使用 Props 以及何时使用 State

When to use Props and when State in Preact sub components

reactjs

preact