fragment

一些小场景会用到：

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 (<h1 onClick={() => {this.setState(({ count }) => ({ count: count + 1 }))}}>{this.state.count}</h1>)}} 

当点击到5时，抛出一个错误。

一个界面有很多组件,如果任何一个出现错误崩溃，直接渲染错误边界的自定义错误页面，会导致错误页面覆盖其他正确子组件，所以可以用错误边界包裹住子组件。

如果子组件错误：

1.错误边界捕获，应用不能崩溃

2.记录日志

3.错误信息显示优化

如何定义错误边界？类组件。下面定义错误边界：

 class ErrorBoudary extends React.Component { 子组件发生错误--react库<--抛给钩子函数（接收错误：error，errorInfo） componentDidCatch(error, errorInfo) {console.log("componentDidCatch");console.log(error);console.log(errorInfo);this.setState({error,errorInfo})} render(){ return(有错误： const {error,errorInfo} = this.state //拆解出错误//有错误：if(error||errorInfo){return (//自定义错误页面<div><h1>没事的，一个小错误而已，你已经很棒了哦</h1><span>wrong</span> <details style={{whiteSpace:"pre-wrap"}}>{error&&error.toString()}<br/>详情</details></div>)} //没错误，直接渲染页面else{return (this.props.children)} ) }
 } 

封装在App里，就可以运行了

 function App() {return (<div><h1>app component</h1><ErrorBoudary><BugCount /></ErrorBoudary></div>)} 

高阶组件

场景：

1.组件代码复用，很多组件都有共同逻辑，考虑是否需要把公共代码抽离出来2.使用三方组件：保护三方组件 需求：扩展三方组件（增强） 使用高阶组件 ，不侵害原有组件在三个组件中要用到一段相同的代码段，于是我们考虑将该代码块抽离出来用于增强，并通过props注入被增强的组件：

 let HOC = (C) => {return class _ extends React.Component {common() {return "common function logic"}render() {return (<C common={this.common} />)}}} 

所以当调用高阶组件时，就是传入一个组件：

const HOCA = HOC(A) //A成为高阶组件
const HOCB = HOC(B) //B成为高阶组件
const HOCC = HOC(C) //C成为高阶组件 

如今就可以在ABC三个函数组件中通过props接收到传递过来的common方法了。

 class A extends React.Component {render() {return (<div><h1>A Componnet</h1>{this.props.common()//直接调用}</div>)}} 

B、C也是如此，类似于A。

最后在App组件中使用的就是高阶组件的化身：

 function App() {return (<div><HOCA /><HOCB /><HOCC /></div>)}ReactDOM.render(<App />, document.getElementById("app")) 

完美使用高阶组件。

网络请求

想要用get请求一个url，并从中拿到数据：

使用componentDidMount这个生命周期方法，因为它在组件挂载之后执行，也只会执行一次。通常用于发送网络请求或者添加订阅。

componentDidMount(){const {url} = props.urlfetch(url,{method:"GET"}).then(response=>response.json()).then({data}=>{data}) //回调获取url中的数据
} 

最后

最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。

有需要的小伙伴，可以点击下方卡片领取，无偿分享