react三大核心之一props

html标签可以在标签上写自定义属性，那么react的组件，也可以像传属性一项，给组件传props；

react组件接收到传入的属性后，会自动塞进实例的props属性中，通过this.props可以拿到外部传入的属性

来看一下props的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>组件实例核心属性1：state</title>
</head>
<body>
  <!-- 准备一个容器 -->
  <div id="test"></div>
  <div id="test2"></div>
  <div id="test3"></div>
  <div id="test4"></div>
  <!-- 引入react核心库 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/react/18.2.0/umd/react.development.min.js"></script>
  <!-- 引入react-dom, 用于支持react操作dom, 需要在核心库之后引入 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/18.2.0/umd/react-dom.development.min.js"></script>
  <!-- 引入babel.js，用于将jsx转化为js -->
  <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.18.7/babel.min.js"></script>

  <script type="text/babel">
    // 1.创建类组件
    class Person extends React.Component{
      render() {
        console.log(this);
        const { name, age, sex } = this.props;
        return (
          <ul>
            <li>姓名: {name}</li>
            <li>性别: {sex}</li>
            <li>年龄: {age}</li>
          </ul>
        )
      }
    } 
    // 挂载
    ReactDOM.render(<Person name="tom" age="18" sex="女" />, document.getElementById('test'))
    ReactDOM.render(<Person name="老刘" age="30" sex="男" />, document.getElementById('test2'))
    ReactDOM.render(<Person name="老王" age="19" sex="女" />, document.getElementById('test3'))
    // 批量传递props
    const p = { name: '老李', age: 20, sex: '男' };
    ReactDOM.render(<Person {...p} />, document.getElementById('test4')) // name展示 老李
    p.name = 'xxx';
  </script>
</body>
</html>

props类型限制：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>组件实例核心属性1：state</title>
</head>
<body>
  <!-- 准备一个容器 -->
  <div id="test"></div>
  <div id="test2"></div>
  <div id="test3"></div>
  <div id="test4"></div>
  <!-- 引入react核心库 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/react/18.2.0/umd/react.development.min.js"></script>
  <!-- 引入react-dom, 用于支持react操作dom, 需要在核心库之后引入 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/18.2.0/umd/react-dom.development.min.js"></script>
  <!-- 引入babel.js，用于将jsx转化为js -->
  <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.18.7/babel.min.js"></script>
  <!-- 引入prop-types -->
  <script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.min.js"></script>
  <script type="text/babel">
    // 1.创建类组件
    class Person extends React.Component{
      render() {
        console.log(this);
        const { name, age, sex } = this.props;
        return (
          <ul>
            <li>姓名: {name}</li>
            <li>性别: {sex}</li>
            <li>年龄: {age}</li>
          </ul>
        )
      }
    }
    console.log(PropTypes, 'PropTypes===');
    // 对标签属性进行类型、必要性的限制
    // react会识别类的propTypes的静态属性，如果有代表对props有限制，如果没有，则没有限制
    Person.propTypes = {
      // name: React.propTypes.string, // 15版本及之前的写法，propTypes在React核心库中
      name: PropTypes.string.isRequired, // 15版本之后，从核心库抽离出来了  这里代表name必须是字符串类型，并且是必填的
      age: PropTypes.number.isRequired, // age必填，且为数值
      sex: PropTypes.string, // sex为字符转
      speak: PropTypes.func , // 限制speak为函数
    }
    // 给标签属性加默认值
    Person.defaultProps = {
      sex: '男', //sex默认为男
    }
    // 挂载
    ReactDOM.render(<Person name="tom" age="18" sex="女" speak={speak} />, document.getElementById('test'))
    ReactDOM.render(<Person name="老刘" age="30" />, document.getElementById('test2'))
    ReactDOM.render(<Person name="老王" age="19" sex="女" />, document.getElementById('test3'))
    // 批量传递props
    const p = {  age: 20 };
    ReactDOM.render(<Person {...p} />, document.getElementById('test4'))// 给组件传递方法
    function speak() {
      console.log('我说话了');
    }
  </script>
</body>
</html>

props是只读属性，在组件内部不能修改

类组件如果写了构造函数，就必须用super接收props，否则this.props是undefined；所以能不写构造函数就不写构造函数；

构造函数在组件中的主要作用就是给初始state赋值以及改变this指向的作用。但是state赋值，可以用 state = this.props的方式；改变this指向可以用箭头函数来替代。

类组件对props的限制以及默认值的规则可以写在类的内部，用static关键字给类加静态属性

// 1.创建类组件
    class Person extends React.Component{
      constructor(props) {
        // 如果写了构造器，必须用super接收props，否则this.props是undefined;不写构造器没问题
        console.log(props, 'props');
        super(props)
      }

      static propTypes = {
        name: PropTypes.string.isRequired,
        age: PropTypes.number.isRequired, 
      }

      // 给标签属性加默认值
      static defaultProps = {
        sex: '男', //sex默认为男
      }

      render() {
        console.log(this);
        const { name, age, sex } = this.props;
        return (
          <ul>
            <li>姓名: {name}</li>
            <li>性别: {sex}</li>
            <li>年龄: {age}</li>
          </ul>
        )
      }
    }
    
    // 挂载
    ReactDOM.render(<Person name="tom" age="18" sex="女" />, document.getElementById('test'))

旧版函数组件不能玩转 state和refs，但是可以玩 props

// 函数是组件
    function Person(props) {
      console.log(props, 'props');
      const { name, sex, age } = props;
      return (
        <ul>
          <li>姓名: {name}</li>
          <li>性别: {sex}</li>
          <li>年龄: {age}</li>
        </ul>
      )
    }
    // 对props进行限制
    Person.propTypes = {
      name: PropTypes.string.isRequired,
      age: PropTypes.number.isRequired, 
    }

    // 给标签属性加默认值
    Person.defaultProps = {
      sex: '男', //sex默认为男
    }

    // 挂载
    ReactDOM.render(<Person name="tom" age="18" sex="女" />, document.getElementById('test'))