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.url
    fetch(url,{method:"GET"})
    .then(response=>response.json())
    .then({data}=>{data}) //回调获取url中的数据
}