Question

随着React钩子的到来，我们应该为React自定义钩子使用prop-types

import React from 'react';
import PropTypes from 'prop-types';    

const useTitle = title => {
  React.useEffect(() => {
    document.title = title;
  }, [title]);
}

useTitle.propTypes = {
  title: PropTypes.string.isRequired,
};

export default useTitle;

以上是验证传递给自定义React钩子的参数的好方法，还是应该采用其他方法来验证传递给自定义钩子的道具/参数，这基本上只是一个简单的功能。

Answer 1

不。 React无法验证自定义钩子或内置钩子道具。

Look here for updateFunctionComponent，它将checkPropTypes用于反应组件来验证道具类型，然后使用钩子将其渲染，即检出renderWithHooks。

现在，如果您选中here in renderWithHooks method，它将更新调度程序并调用您的功能组件，该功能组件又调用您的自定义钩子，因为这只是功能组件内部的另一个功能调用。

您的自定义钩子将调用内置钩子。您可以检查实现here。根据调度程序的类型，它将调用内置的挂钩。如果您在整个文件中搜索checkPropTypes，将找不到用于验证道具类型的验证逻辑或prop-types/checkPropTypes依赖项。

Here是一些不错的文章，介绍了react hooks的工作原理

Answer 2

在我看来，使用某种类型机制会更好，例如TypeScript，但如果您不这样做，则仍应使用propTypes，此外，您可以从kentcdodds中检查本课程，以确保propTypes的使用https://egghead.io/courses/simplify-react-apps-with-react-hooks

Answer 3

您将prop-types用于props，因此，如果它是prop，则可以使用propTypes

Answer 4

我将PropTypes.checkPropTypes用于useSelector挂钩。它对我有用。

const useTitle = title => {
  React.useEffect(() => {
    document.title = withPropsValidation(title);
  }, [title]);
}

const withPropsValidation = props => {
  PropTypes.checkPropTypes(propTypes, props, 'prop', '')
  return props
}

const propTypes = {
  title: PropTypes.string.isRequired,
}

https://github.com/facebook/prop-types#proptypescheckproptypes

Answer 5

打字稿是验证和检查道具的最佳方法

import React from 'react';   

const useTitle = ({title}:{title?:string})=> {
  React.useEffect(() => {
    document.title = title;
  }, [title]);
}

export default useTitle;

或

import React from 'react';   

type customPropType= {
    title?:string
}

const useTitle = ({title}:customPropType)=> {
  React.useEffect(() => {
    document.title = title;
  }, [title]);
}

export default useTitle;

Answer 6

我在docs中找不到能明确回答此问题的任何内容，但出于以下两个原因，我倾向于“是”：

第一，如果您将react-scripts声明为prop，则isRequired的最新版本（将Facebook和Dan Abramov列为前两名）。，但无法传递该prop（即使您不使用它）：

const CustomHook = ({ abc }) => {
   return <div>&nbsp;</div>;
}

CustomHook.propTypes = {
  abc: PropTypes.string.isRequired,
};

ReactDOM.render(<CustomHook />, document.getElementById('root'));

由react-scripts 2.1.3构建时，以上代码将产生以下错误：

The prop `abc` is marked as required in `CustomHook`, but its value is `undefined`

第二，如果您将示例hook编写为Component，则应该使用prop-types：

class UseTitle extends Component {
  componentDidMount() {
    document.title = this.props.title;
  }

  componentDidUpdate(prevProps) {
    if (prevProps.title !== this.props.title) {
      document.title = this.props.title;
    }
  }

  render() {
    return null;
  }
}

UseTitle.propTypes = {
  title: PropTypes.string.isRequired,
};

这一切使我相信，为前进的自定义prop-types声明hook仍然是最佳实践。但是，这确实是一个很好的问题，我很想知道是否有人反对。

Answer 7

最好使用TypeScript（或FlowType），如果两者都不是选项，则可以使用PropTypes。

自定义反应挂钩的原型

7 个答案: