react基础

一、组件

1、函数定义

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

2、类定义

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

组件名称必须以大写字母开头，小写字母表示DOM标签

组件返回值只能有一个根元素，多个组件必须用一个div或者Fragment来包裹

二、props

props 只读

state 可变
props 是父组件与子组件交互的唯一方式

defaultProps 为props定义默认值，在组件中声明static静态属性
propTypes 类型检查，在组件中声明static静态属性
只在开发模式下进行检查，当你给属性传递了无效值时，JavsScript 控制台将会打印警告

PropTypes.array // 声明属性为数组
PropTypes.bool // 声明属性为boolean
PropTypes.func // 声明属性为函数
PropTypes.number // 声明属性为数字
PropTypes.object // 声明属性为对象
PropTypes.string // 声明属性为字符串
PropTypes.symbol

PropTypes.array.isRequired // 声明属性为数组，且属性父组件没有提供时，会打印警告信息
PropTypes.instanceOf(array) // 声明属性为某个类的实例
PropTypes.arrayOf(PropTypes.number)  // 一个指定元素类型的数组
PropTypes.objectOf(PropTypes.number) // 一个指定类型的对象

三、生命周期