三种React代码复用技术

多云转晴

发布于 2020-04-27 10:17:52

2.3K0

发布于 2020-04-27 10:17:52

文章被收录于专栏：webTowerwebTower

React 代码复用

如何自己编写一个 react hook？react 允许我们自己编写 Hook。

场景

我们有几个组件，它们都要先进行 ajax 请求，获取到数据，然后把数据渲染到页面上。总体代码：

class App extends Component{
    state = {
        isLaoded: false,
        data: null
    }
    componentDidMount(){
        // 发起网络请求
        axios.get("/api/fruits")
            .then(res => res.data)
            .then(data => {
                this.setState({
                    isLaoded: true,
                    data: data
                });
            }).catch(err => console.error(err));
    }
    render(){
        if(!this.state.isLaoded){
            return (
                // 数据没有请求到之前，loading 状态
                <h1>Loading...</h1>
            );
        }else{
            return (
                <div>
                    { this.state.data.map((item, idx) => <p key={idx}>{item.name} --- {item.label}</p>) }
                </div>
            );
        }
    }
}

很多代码都是重复的，只有 isLoaded 变为 true 后渲染的 UI 不同，以及请求 URL 不同。我们完全可以将相同的部分提取到一个通用的地方。在 Hooks 出来之前，一般有两种提取公共代码的手段：HOC 高阶组件和 render-props。

高阶组件

如果要使用高阶组件的形式复用代码逻辑，就需要写一个函数，这个函数接收 React 组件作为参数，然后再返回一个新的 React 组件。

// 首先会接受一个 url
export function withFetch(url){
    // 然后接收组件
    return function(Com){
        return class extends React.Component{
            state = {
                isLoaded: false,
                data: null,
            }
            componentDidMount(){
                fetch(url)  // 请求数据
                    .then(json => json.json())
                    .then(data => {
                        // 更新 state
                        this.setState({
                            isLoaded: true,
                            data,
                        });
                    });
            }

            render(){
                if(!this.state.isLoaded){
                    // 数据没有获取到时，展示 loading
                    return <h1>Loading...</h1>
                }else{
                    // 把请求数据传递给组件
                    return <Com data={this.state.data} />
                }
            }
        }
    }
}

上面的 App 组件就不用再那么写了：

import { withFetch } from "./withFetch";

class App extends Component{
    render(){
        return (
            <div>
                {/* 使用 this.props 获取到传递的属性 */}
                { this.props.data.map((item, idx) => <p key={idx}>{item.name} --- {item.label}</p>) }
            </div>
        );
    }
}
// 导出时用 withFetch 高阶组件包裹一下
export default withFetch("/api/fruits")(App);

高阶组件的不足

上面的高阶组件，增强了 App 组件，让 App 组件可以通过 this.props.data 拿到请求来的数据。假设我们使用 App 时也可能给它传一个 data 属性：

function Xxx(){
    return <App data={[]} />
}

这个时候，Xxx 组件传入的 data 属性将会失效。也就是说，高阶组件可能会覆盖其他传入的属性值。尤其是多个高阶组件嵌套使用时，可能无法分清数据的来源。

// 多层嵌套 withRouter 和 withFetch 如果使用了同样的 props 时，会有冲突
export default withRouter(withFetch(MyComponent));

render-props

render-props 是另一种复用技术。我们改造上面的高阶函数，让它变成一个普通的组件：

class Fetch extends React.Component{
    state = {       // 初始化 state
        isLoaded: false,
        data: null,
    }
    componentDidMount(){
        // url 是我们为这个组件传入的值
        fetch(this.props.url)
            .then(json => json.json())
            .then(data => {
                this.setState({
                    isLoaded: true,
                    data,
                });
            });
    }
    render(){
        if(!this.state.isLoaded){
            return <h1>Loading...</h1>
        }else{
            // 给 props.render 传入请求到的数据
            // props.render 应返回一个 jsx 或组件
            return this.props.render(this.state.data);
        }
    }
}   export default Fetch;

改造 App 组件的代码：

import Fetch from "./Fetch";

function List({item}){
    return <p >{item.name} --- {item.label}</p>
}

class App extends Component{
    render(){
        return (
            <div>
                {/* 给 Fetch 组件传入 url 和 render 函数，render函数就像一个回调函数 */}
                {/* render 函数内部渲染数据 */}
                <Fetch
                    url="/api/fruits"
                    render={(data) => data.map((item, idx) => <List item={item} key={idx} />)}
                ></Fetch>
            </div>
        );
    }
}
export default App;

render-props 的不足

使用 render-props 解决了高阶组件的不足，使用组件 + render 回调的方式避免的 props 的属性值覆盖问题。

但，render-props 也有一些缺点，比如如果 render 里渲染的数据也要使用 render-props 的方式渲染组件，就会出现多级嵌套。例如：

function App(){
    return (
        <Fetch
            url="/api/fruits"
            render={(data) => data.map((item,idx) =>
                <List item={item} key={idx}>
                    <Fetch
                        url={`/api/${item}`}
                        render={data =>
                            <Fetch
                                url={`/api/${data}`}
                                render={data => <Entry data={data} />}
                            />
                        }
                    />
                </List>
            )}
        />
    );
}

过度使用 render-props 会让代码比较丑陋。Fetch 组件把 state 的数据传递给了 render 函数，这会让 App 组件在其它地方很难使用到 render 函数中的数据（或者说只能在 render 函数中使用数据），比如 useEffect等钩子函数或者其他的组件。

自定义 Hook

自定义 Hook 也可以达到组件逻辑复用的目的。自定义 Hook 需要遵循下面几点要求：

自定义 Hook 是一个函数，其名称以 use 开头；
自定义的 Hook 函数，函数内部可以调用其他的 Hook，函数的参数可以自由决定；
不要在循环，条件或嵌套函数中调用 Hook，只在最顶层使用 Hook；
只在 React 函数中调用 Hook，不要在普通的 JavaScript 函数中调用 Hook；

改造 App 组件中内容：

import React, { useState, useEffect } from "react";
// 自定义的 hook，接收 url 作为参数
function useFetch(url){
    let [data, setData] = useState(null);
    useEffect(() => {
        fetch(url)
            .then(json => json.json())
            .then(data => {
                setData(data);
            })
    },[]);
    return data;
}

export function App(){
    // 拿到数据
    let data = useFetch("/api/fruits");
    // 如果数组没有拿到，就渲染 加载组件
    return data ? data.map((item, idx) => <h2 key={idx}>{item.name} --- {item.label}</h2>) : <h1>Loading...</h1>;
}

Hook 也可以返回 jsx，例如：

import React, { useEffect, useState } from "react";

function useFetch(url, RenderCom){
    let [data, setData] = useState(null);
    useEffect(() => {
        fetch(url)
            .then(json => json.json())
            .then(data => {
                setData(data);
            });
    },[]);
    // loading 组件
    function Loading(){
        return <h1>Loading...</h1>
    }
    if(!data){
        return <Loading />;
    }else{
        // 给要渲染的组件传入数据
        return <RenderCom data={data} />
    }
}

export function App(){
    function Render(props){
        // 拿到数据，进行渲染
        const { data } = props;
        return data.map((item, idx) => <h2 key={idx}>{item.name} ---> {item.label}</h2>)
    }
    // 获取到组件
    let R = useFetch("/api/fruits", Render);
    return R;
}

使用自定义 Hook 也可以做到代码复用。而且比前两种方式要简洁。当然这里编写的 useFetch 钩子功能一般，类似异步请求的 Hook 可以下载 use-http 这个模块，它的功能很全面。

useWinSize

假如我们想要获取到文档可视区域的宽高，当窗口大小发生改变时也要获取到准确的宽度、高度数据，就可以自定义一个 Hook 来完成这个任务。

import { useState, useEffect } from 'react';

function useWinSize(){
    let [width, setWidth] = useState(document.documentElement.clientWidth);
    let [height, setHeight] = useState(document.documentElement.clientHeight);

    const handleReset = function(){
        setWidth(document.documentElement.clientWidth);
        setHeight(document.documentElement.clientHeight);
    }

    useEffect(() => {
        // 当触发 reset 事件时，就重新计算宽、高
        window.addEventListener("reset", handleReset, false);

        // 组件在将要卸载时会调用这个函数
        return () => {
            window.removeEventListener('reset', handleReset, false);
        }
    },[]);
    // 返回数据
    return { width, height };
}

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2020-04-19，如有侵权请联系 cloudcommunity@tencent.com 删除

react

渲染

本文分享自 WebTower 微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

react

渲染

登录后参与评论

0 条评论

热度