React的高阶函数

本文深入探讨了高阶组件的概念和实现方式,展示了如何利用高阶组件优化代码复用性和组件间的数据传递,通过实例说明了高阶组件在React中的应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 高阶组件:就是一个函数,且该函数接受一个组件作为参数,并返回一个新的组件

函数模拟高阶组件

 1 最普通的方法,一个welcome方法,一个goodbye。两个函数先从localStorage中读取username,然后对username进行一些        处理

    function welcome(){

      let username = localStroage.getItem('username');

     console.log('welcome'+username);

   }

  function goobye(){

      let username = localStroage.getItem('username');

     console.log('goobye'+username);

   }

  welcome();

  goodbye();

  这两个方法都一句的代码是重复的,使用一个中间函数,读取username,他来负责将username传递给两个函数

  

  function wrapClass(warpPops){

    let newComponent = () => {

         let name = localStorage.getItem('username');

         warpPops(name);

    }

    return newComponent;

}

   function welcome(username){

   console.log('welcome'+username);

  }

  function googbye(username){

   console.log('googbye'+username);

  }

 let wel = wrapClass(welcome);

 let goo = wrapClass(googbye);

  wel();

  goo();

从这里可以看出wrapClass函数就是一个‘高阶函数’,这个函数处理了username,然后将username传递到目标函数,而目标函数不用关心username是怎么来的

高阶组件

 高阶组件就是一个没有副作用的纯函数

export default (wrapComponent) => {

   class NewComponent extends React.Component{

          contructor(){

           super(props);

           this.state = {

              username:''

           }

         }

         componentWillMount(){

              let username = localStorage.getItem('username');

             this.setState({

              username

           })

          }

         render(){

               return(

                  <wrapComponent username={this.state.username}></wrapComponent>

               )

        }

   }

}

import wrapClass from 'wrapClass';

class Welcome extends React.Component{

  constructor(props){

   super(props);

   this.state = {

     username:''

   }

  componentDidMount(){

    let username = this.props.username;

    this.setState({

     username

   })

  }

  render(){

      return(

         <div>welcome {this.state.username}</div>

     )

  }

  }

}

wel = wrapClass(Welcome);

export default wel;

class Goobye extends React.Component{

  constructor(props){

   super(props);

   this.state = {

     username:''

   }

  componentDidMount(){

    let username = this.props.username;

    this.setState({

     username

   })

  }

  render(){

      return(

         <div>goodbye {this.state.username}</div>

     )

  }

  }

}

 

goo= wrapClass(Goodbye);

export default goo;

高阶组件就是把username通过props传递给目标组件了,目标组件只管从props里面拿来用就好了

React 高阶函数可以在许多场景中运用,以下是一些常见的应用示例: 1. 权限控制:通过高阶函数可以实现对组件的访问权限控制。例如,可以创建一个名为 `withAuth` 的高阶函数,它根据用户的登录状态来决定是否渲染原始组件。 ```jsx function withAuth(WrappedComponent) { return function WithAuth(props) { const isLoggedIn = checkUserLoginStatus(); // 检查用户登录状态的函数 if (isLoggedIn) { return <WrappedComponent {...props} />; } else { return <div>请先登录</div>; } } } const MyComponent = () => <div>需要登录才能看到的内容</div>; const AuthComponent = withAuth(MyComponent); // 使用增强后的组件 <AuthComponent /> ``` 2. 数据获取:通过高阶函数可以封装数据请求逻辑,使组件可以方便地获取数据并进行渲染。例如,可以创建一个名为 `withDataFetching` 的高阶函数,它负责从 API 获取数据,并将数据作为 props 传递给原始组件。 ```jsx function withDataFetching(WrappedComponent, url) { return function WithDataFetching(props) { const [data, setData] = useState(null); useEffect(() => { fetchData(); }, []); async function fetchData() { try { const response = await fetch(url); const jsonData = await response.json(); setData(jsonData); } catch (error) { console.error('Error fetching data:', error); } } return <WrappedComponent {...props} data={data} />; } } const MyComponent = ({ data }) => { if (!data) { return <div>Loading...</div>; } return ( <ul> {data.map(item => ( <li key={item.id}>{item.name}</li> ))} </ul> ); }; const DataComponent = withDataFetching(MyComponent, 'https://api.example.com/data'); // 使用增强后的组件 <DataComponent /> ``` 3. 状态管理:通过高阶函数可以封装一些公共状态,使多个组件可以共享该状态。例如,可以创建一个名为 `withTheme` 的高阶函数,它将主题信息作为 props 传递给原始组件。 ```jsx function withTheme(WrappedComponent) { return function WithTheme(props) { const theme = useContext(ThemeContext); // 使用 Context 获取主题信息 return <WrappedComponent {...props} theme={theme} />; } } const MyComponent = ({ theme }) => ( <div style={{ background: theme.background, color: theme.text }}> 主题样式 </div> ); const ThemedComponent = withTheme(MyComponent); // 使用增强后的组件 <ThemedComponent /> ``` 这些只是一些常见的应用场景,实际上,React 高阶函数非常灵活,可以根据具体需求来定义和使用。它们可以帮助我们在不改变原始组件的情况下,增加、修改或封装组件的功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值