或许看到这个标题大家都懵了，哎呀，只顾这学类式组件，怎么都忘了还有一个函数式组件。那么今天，他来了。

回顾

按照惯例，我们都是要对上节课内容来做一个简单的回顾的。

但是上节课我们学了啥啊？上节课就一个要点，类组件能不写构造器就不写构造器。如果真的要写构造器，那么就要接收props并且传给super。就这么一点那么好，我们开始学习函数式组件如何使用props。

函数式组件

我不知道大家还记不记得我们之前就说过，组件的三大核心属性其实是组件实例的三大核心属性。那么函数哪有实例？函数连实例都没有，我们怎么还能用组件三大属性之一的props呢？

其实，函数式组件虽然没有实例，而且函数式组件在我们所说的组件三大核心属性中，state和我们即将要学习的refs这两大属性确实是不支持，但是，函数式组件是可以支持props的

大家可能很好奇为啥呀？函数都没有实例为啥还能使用props呢？虽然说函数没有实例，但是函数能接收参数啊，props是不是外面传进去的啊？那我函数把props当成参数用就是了。

我们来先看一个例子：

function Person() {
  return (
    <ul>
      <li>姓名：{name}</li>
      <li>性别：{gender}</li>
      <li>年龄：{age + 1}</li>
    </ul>
  );
}
ReactDOM.render(<Person name="jingxun" age={18} gender="男"/>, document.getElementById("test"));

我们先仿照之前类式组件中来写一下。但是大家是不是发现问题出现了？我们在类式组件里面写的时候解构了this.props并且赋值给了name，age，gender所以说类式组件里面我们可以使用这几个变量。但是我们的函数式组件没接到props啊，我们也没有这几个变量可以用啊。那我们怎么办？

我们也说了函数是可以传参数的，而且和类式组件也很相似，我们在组件标签传入属性，react都帮我收集好成为一个对象，那么我们是不是只要在函数设置一个参数来接收就行了啊？就好比我们类式组件的构造器方法一样，那么好，我们来修改一下代码：

function Person(props) {
  const { name, age, gender } = props;
  return (
    <ul>
      <li>姓名：{name}</li>
      <li>性别：{gender}</li>
      <li>年龄：{age + 1}</li>
    </ul>
  );
}
ReactDOM.render(<Person name="jingxun" age={18} gender="男"/>, document.getElementById("test"));

如果我们这样修改一下代码那是不是就可以了呢？我们看一下页面：

image-20211221200110260

我们看，页面渲染成功了，而且控制台也没有报错。

或许大家现在心思就又开始活泛起来了，既然我们能通过传参方式来用props，那么能不能通过这种方式来用state啊？当然这是不可能的，除非用react最新版本出的react hooks才行。包括refs在不引入react hooks的前提下，函数式组件也是用不了的。但这都是后话了。我们在这就不在多说了。

可能大家又要问了，那我们函数式组件能不能对props进行限制呢？当然可以。但有一点，函数里面有static这个概念吗？这是没有的，所以说如果函数式组件想要限制props就只能写在外面。也就是我们之前写的Person.propTypes和Person.defaultProps。只要加了这两个属性，那么我们就能对props进行限制，那我们来看一下代码：

function Person(props) {
  const { name, age, gender } = props;
  return (
    <ul>
      <li>姓名：{name}</li>
      <li>性别：{gender}</li>
      <li>年龄：{age + 1}</li>
    </ul>
  );
}
Person.propTypes = {
  name: PropTypes.string.isRequired,
  gender: PropTypes.string,
  age: PropTypes.number
}

Person.defaultProps ={
  age: 18, 
  gender:"男"
}
ReactDOM.render(<Person name={123} />, document.getElementById("test"));

我们上面代码是限制了name为字符串，而且必须，gender为字符串，默认为男，age为数字，默认为18。那我就来试一下功能，只传name但是格式不对，看看上面效果

image-20211221201407662

大家看一下，页面正常渲染了，提醒name的格式不对。所以我们到此就完成了函数式组件使用props。但是我还是建议用类式组件吧，这函数式组件实在是没有什么意思。当然如果后面学习了react hooks的话，大家再把函数式组件捡起来也是可以的。

总结

  • 函数式组件目前只能使用props
  • 函数式组件使用参数来接收props
  • 函数式组件可以限制props但是只能写在函数体外

Copyright statement：The articles of this site are all original if there is no special explanation, indicate the source please when you reprint.

Link of this article：https://work.lynchow.com/article/func_props/