react-1

1.函数式组件

import React, { Component } from 'react';
import ReactDom from 'react-dom';

function Welcome(props) {
  return <h1>{props.name}</h1>;
}

ReactDom.render(<Welcome  name="张三"/>, document.getElementById('root')); //这个name，张三，会转化为一个key为name，value是张三的对象，传递给Welcome函数

2. 类组件

import React, { Component } from 'react';
import ReactDom from 'react-dom';

class Welcome extends Component {
  render() {
    return <h1>{this.props.name}</h1>;
  }
}

ReactDom.render(<Welcome  name="张三"/>, document.getElementById('root')); //Component类的constructor中有“this.props = props”,并且同上，name=张三会议props的形式传入constructor中。类组件的render方法返回生成的react元素

组件名的首字母一定是大写的，组件只有一个根元素

3.props的校验

在vue中也有props，是父组件传递给子组件的值，有时子组件中对值的格式有特殊要求，就需要对props进行校验。在react中大致也是这个意思

• 无论使用函数还是类来声明组件，都不能修改它的props
• 函数组件就是一个纯函数，相同的输入产生相同的输出，不能有副作用
  首先，安装包‘prop-types’

import React, { Component } from 'react';
import ReactDom from 'react-dom';
import propTypes from "prop-types";

class Person extends Component {
  static propTypes = {  //需要在类上定义静态属性propTypes（固定写法）
    name: PropTypes.string.isRequired,  //必填
    gender: PropTypes.oneOf(['male', 'female']),  //gender只能从枚举中取
    hobbies: PropTypes.arrayOf(PropTypes.string), // 类型为数组，并且每一项都是string
    position: PropTypes.shape({    // position的类型为x，y为number类型的对象
      x: PropTypes.number,
      y: PropTypes.number,
    }),
    age(props, propName, componentName) { //以上校验均为prop-types包自带的，而此处校验为自定义的规则
      let age = props.age;
      if (age < 0 || age > 120) {
        return new Error(`${componentName}的${propName}非法`);
      }
    },
  };
  render() {
    let { age, name, gender, hobbies, position } = this.props;
    return (
      <div>
        <p>age: {age}</p>
        <p>name: {name}</p>
        <p>gender: {gender}</p>
        <p>hobbies: {hobbies}</p>
        <p>position: {JSON.stringify(position)}</p>
      </div>
    );
  }
}

ReactDom.render(
  <Person
    name="lcc"
    age={200}
    gender="male"
    hobbies={['smoking', 'drinking']}
    position={{ x: 100, y: 100 }}
  />,
  document.getElementById('root')
);