react基础

发布时间：2020-12-15 20:37:11 所属栏目：百科来源：网络整理

导读：一、组件 1、函数定义 function Welcome(props) { return h1Hello,{props.name}/h1;} 2、类定义 class Welcome extends React.Component { render() { return h1Hello,{ this .props.name}/h1; }} 组件名称必须以大写字母开头，小写字母表示DOM标签组件返回

一、组件

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) // 一个指定类型的对象

三、生命周期

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!