React可动态增删子组件的唯一key生成方案可行性咨询

现有方案的缺陷 #

你当前的实现大部分常规场景下可以正常运行，但存在两个可优化的明显问题：

• 异步连续调用风险：React的setState是异步批量更新的，若短时间内连续触发多次addSection，前几次更新未完成时this.state.data还是旧值，会导致多次生成的key重复，最终触发渲染异常。
• 性能损耗：每次生成key都要全量遍历data数组计算最大值，当数组长度达到千级以上时会产生不必要的O(n)性能开销，虽然普通C端场景感知不明显，但仍有优化空间。

更优的key生成方案 #

1. 实例级自增计数器（最推荐，适配现有代码） #

不用依赖state存储计数，直接在组件实例上挂载一个自增变量，生成key时直接取值后自增即可，完全规避异步问题，性能为O(1)，也永远不会出现重复key。
改造后代码示例：

class ParentComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [ XXXX ]
        };
        // 初始化计数器，兼容已有数据的最大key
        this.nextKey = this.state.data.length 
            ? Math.max.apply(Math, this.state.data.map(d => d.key)) + 1 
            : 1;
    }
    
    addSection(title, content) {
        const newKey = this.nextKey++;
        this.setState({
            data: [
                ...this.state.data, 
                { title, content, key: newKey }
            ]
        });
    }

    removeFunc(key) {
        this.setState({
            data: this.state.data.filter(e1 => e1.key !== key)
        });
    }

}

export default ParentComponent;

2. 随机短ID生成（适合需要跨会话不重复的场景） #

如果你的数据需要持久化到本地存储、刷新页面后仍要保持key唯一，可以用简单的随机字符串生成函数，无需引入第三方UUID库，普通业务场景下重复概率可以忽略不计：

// 生成7位随机字符串作为key
const generateShortId = () => Math.random().toString(36).slice(2, 9);

调用时直接const newKey = generateShortId()即可，不需要依赖任何组件状态。

补充说明 #

如果后续你把类组件重构为函数式组件，只需要用useRef存储这个自增计数器即可，逻辑完全一致。

内容的提问来源于stack exchange，提问作者John Bustos