react扩展（一些单独技术点）

蚂蚁二娘

于 2022-09-23 15:59:09 发布

阅读量493

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/web2022050901/article/details/127012710

版权

本文介绍了React中的几个关键技术点：使用Fragment避免额外DOM节点，错误边界用于捕获并处理子组件的错误，以及高阶组件实现代码复用和组件增强。同时，提到了在组件生命周期中利用componentDidMount进行网络请求。

摘要由CSDN通过智能技术生成

一些小场景会用到：

class Table extends React.Component{render(){return(<table><tr><Column/></tr></table>)}
}

将table进行组件抽离：

 function Column() {return (<div><td>hello</td><td>world</td></div>)}

可是tr紧接的就会是div，而非td。

由此，引出新方式：fragment

它可以使得不添加额外的DOM节点

 function Column() {return (<React.fragment><td>hello</td><td>world</td></React.fragment>)}

这样，就会使tr与rd进行衔接啦。不会警告啦。

错误边界：

需求：程序出错了，阻止整个程序崩溃。

本质是一个组件，包裹所有的组件，当子组件出错误的时候它可以捕获到。

先定义子组件：

 class BugCount extends React.Component {state = {count: 0,}render() {if (this.state.count === 5) {throw new Error("count error")}return

关注