React 设计模式与最佳实践 个人总结

React 设计模式与最佳实践 个人总结

高阶组件

高阶组件即接受组件返回组件,形式如下:

const HoC=Component=>EnhanceComponent
案例: 对获取数据封装

对数据获取渲染,我们会这么做…

export default class UserList extends Component {
   
    state = {
   
        list: []
    }
    componentDidMount() {
   
        fetch('')
            .then(response => response.json())
            .then(list => this.setState({
    list }))
    }
    render() {
   
        return (
            <>
                <ul>
                    {
   
                        this.state.list.map(user => (
                            <li key={
   user.id}>{
   user['name']}</li>
                        ))
                    }
                </ul>
            </>
        )
    }
}

封装获取数据后,可以让多处代码获取同一个api数据。我们可以这么做…

const widthData: IWidthData = url => Component => {
   
    return class extends React.Component {