React 使用中值得优化的 7 个点

现在，我们已经看到该表单组件只处理提交和取消动作，其他范围内的事情，都交给了对应的子组件。

是否传递了很多有关配置的 props

在某些情况下，将多个有关配置的 props 组合成一个 options 是个不错的实践。

假设我们有一个可显示某种表格的组件：

<Grid

data={gridData}

pagination={false}

autoSize={true}

enableSort={true}

sortOrder=“desc”

disableSelection={true}

infiniteScroll={true}

…

/>

我们可以很清楚地看出，该组件除了 data 外其余的 props 都是与配置有关的。

如果将多个配置 props 合成为一个 options ，就可更好地控制组件的选项，规范性也得到提升。

const options = {

pagination: false,

autoSize: true,

enableSort: true,

sortOrder: ‘desc’,

disableSelection: true,

infiniteScroll: true,

…

}

<Grid

data={gridData}

options={options}

/>

props 的不兼容性

避免组件之间传递不兼容的 props。

假设你的组件库中有一个 <Input /> 组件，而该组件开始时仅用于处理文本，但过了一段时间后，你将它用于电话号码处理。

你的实现可能如下：

function Input({ value, isPhoneNumberInput, autoCapitalize }) {

if (autoCapitalize) capitalize(value)

return <input value={value} type={isPhoneNumberInput ? ‘tel’ : ‘text’} />

}

问题在于，isPhoneNumberInput 与 autoCapita