在
react
项目开发中经常会遇到有一些代码复用的问题,现介绍几种常见的方式
一、直接把相同的代码复制一份到需要使用的组件中(非常low
的方式)
二、创建一个高阶组件,将复用的代码存放到高阶组件中,需要使用的组件中直接复用
-
1、定义一个高阶组件
import React from 'react'; function withCounter(Component) { return class extends React.Component { state = { number: 0 }; componentDidMount() { setInterval(() => { this.setState({ number: this.state.number + 1 }); }, 1000); } render() { return ( <Component number={this.state.number} /> ) } } }
-
2、普通组件的代码
class ReuseComponent1 extends React.Component { render() { return ( <> <button>{this.props.number}</button> </> ) } }
-
3、使用高阶组件将普通组件包装
export default withCounter(ReuseComponent1);
三、使用render
函数使组件达到复用
-
1、定义组件
import React, { Component } from 'react' export default class ReuseComponent2 extends Component { state = { number: 0 }; componentDidMount() { setInterval(() => { this.setState({ number: this.state.number + 1 }); }, 1000); } render() { return ( <div> {/* 直接调用传递过来的render属性(这里传递的是一个函数) */} {this.props.render({ number: this.state.number })} </div> ) } }
-
2、组件的调用
// render里面传递的是一个函数 <ReuseComponent2 render={props => <p>{props.number}</p>} />
四、使用自定义hooks
一、关于自定义hooks
的认识
- 1、有时候我们会想要在组件之间重用一些状态逻辑
- 2、自定义
Hook
可以让你在不增加组件的情况下达到同样的目的 - 3、
Hook
是一种复用状态逻辑的方式,它不复用state
本身 - 4、事实上
Hook
的每次调用都有一个完全独立的state
- 5、自定义
Hook
更像是一种约定,而不是一种功能。如果函数的名字以use
开头,并且调用了其他的Hook
,则就称其为一个自定义Hook
二、使用自定义hooks
达到代码的复用
-
1、自定义
hooks
函数import React, { useState, useEffect } from 'react'; /** * 自定义hooks,以use开头的名字并且使用内置的hooks */ function useNumber() { let [number, setNumber] = useState(0); useEffect(() => { setInterval(() => { setNumber(number => number + 1); }, 1000); }, []); return [number, setNumber]; }
-
2、使用
export default () => { let [number, setNumber] = useNumber(); return ( <div>{number}</div> ) }