react快速入门(4)

render props

• 插槽，类似于Vue slot
• props.children:通过组件标签传入结构中
• props.render:通过组件标签传入结构中,还可传入数据

props.children

  function ReactComP(){
        return (
            <div>
                container
                 <A>
                    <B></B>
                 </A>
            </div>
        )
    }
    function A(props){
        return (
            <div>
                A组件props.children
                {props.children}
            </div>
        )
    }
    function B(props){
        return <div>显示B组件</div>
    }   
    ReactDOM.render(<ReactComP></ReactComP>,document.getElementById('reactId'))
    

props.render

    function ReactComP(){
        return (
            <div>
                container   
                <C render={count=><D count={count}></D>}>
                </C>
            </div>
        )
    }
    function C(props){
        const [count] = React.useState('初始值');
        return (
            <div>
                C组件props.render
                {props.render(count)}
            </div>
        )
    }
    function D(props){
        console.log(props)
        return (
            <div>
                D组件props.render传来的值是：{props.count}
            </div>
        )
    }
    ReactDOM.render(<ReactComP></ReactComP>,document.getElementById('reactId'))
    

PureComponent

用于组件优化

• React.PureComponent 与 React.Component 很相似,两者的区别在于shouldComponentUpdate()，
• 如果赋予 React 组件相同的 props 和 state，
  • React.Component方法会调用render() 函数会渲染相同的内容
  • React.PureComponent相同(浅比较)的props 和 state会停止调用render函数可提高性能。

• //例子为再次setState一个相同的字符串的state，React.Component会再次调用render，而React.PureComponent不会再次调用render了
    class ReactCom extends React.Component{
            state={
                data:'初始值'
            }
            handelClick=()=>{
                this.setState({
                    data:'初始值'
                })
            }
            render(){
                console.log('container render')
                return (
                    <div onClick={this.handelClick}>
                         <Child data={this.state.data}></Child>    
                         <PureComponentChild data={this.state.data}></PureComponentChild>
                    </div>       
                )
            }
        }
        class Child extends React.Component{       
            render(){
                console.log('child render')
                return (
                    <div>Child{this.props.data}</div>    
                )
            }
        }
        class PureComponentChild extends React.PureComponent{       
            render(){
                console.log('PureComponentChild render')
                return (
                    <div>PureComponentChild{this.props.data}</div>    
                )
            }
        }
        ReactDOM.render(<ReactCom></ReactCom>,document.getElementById('reactId'))
  

Error Boundaries

错误边界简介（React 16）

• 错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误(所以只在class类组件才有这个概念)
• 打印这些错误，同时展示降级 UI

相关api

• componentDidCatch

• static getDerivedStateFromError()

    class ErrorBoundary extends React.Component{
        state={
            hasError:false
        }
        static getDerivedStateFromError(error){
            //更新state中的hasError
            return {
                hasError:true
            }
        }
        componentDidCatch(error, errorInfo){
            //该钩子函数一般用于错误监控，传输错误日志
            console.log(error, errorInfo)
            //也可在这处理更新state中的hasError
    //            this.setState({
    //                hasError:true
    //            })
        }
        render(){
            if(this.state.hasError){
                return <div>显示错误界面</div>
            }
            return <div>{this.props.children}</div>; 
        }
    }
  
    class Child extends React.Component{
        render(){
            test() //故意制造not defined函数错误的情况
            return <div>显示子组件</div>
        }
    } 
  
    ReactDOM.render(
        <ErrorBoundary>
            <Child></Child>
        </ErrorBoundary>,
        document.getElementById('reactId')
    )