React组件
创建组件的两种方式
(1)函数式组件
function App(){
//return null
return <div>App</div>
}
//函数名就是组件名
ReactDom.render(<App />, document.querySelector('#root'))
(2)类式组件
import React from "react"
class App extends React.Component{
render(){
return <div> App Component </div>
}
}
ReactDom.render(<App />, document.querySelector("#root"))
注意:1. 组件名首字母必须大写
2. 组件内部必须要有一个根标签包裹起来
3. 类组件应该继承React.Component父类,从而可以使用父类中提供的属性或方法
4. 类组件必须声明一个render函数,render返回组件为组件界面的虚拟DOM元素
5. 在组件标签渲染时调用,产生实例对象,可以有状态
React脚手架
创建React项目
1.下载 --npm i create-react-app -g
2.创建项目命令 --create-react-app hello-react
3.命令进入项目文件夹 --cd hello-react
4.启动项目 --npm start
降react版本
npm i react@17 react-dom@17
类式组件的状态state
介绍:state(状态)即数据,是类式组件实例对象的属性,只能在组件内部使用
state属性值为对象,可以在state对象中保存多个数据
作用:state属性值改变之后能重新渲染组件,方便更新页面 -> 数据驱动视图
基本使用:(1)初始化state,为实例对象添加属性:
构造器中: this.state = { xxx : 2 }
类中: state = { xxx : 2 }
(2)读取state数据 -> this.state.xxx
(3)更新state数据 -> 不可以直接更新state数据,必须this.setState( { 要修改的属性数据 } )
组件的props属性
作用:props是类式组件实例对象的属性
props用来接受组件外部数据,实现组件的解耦与复用
基本使用:
App.js ->
//传参
let zhangsan = {
name: '张三',
age: 18,
hobby: ['学习','阅读']
}
return <div><Stu {...zhangsan}></div>
Stu.js ->
//解构赋值接受参数
let {name, age, hobby} = this.props;
return <div>
{/*<p>姓名:{this.props.name}</p>*/}
<p>姓名:{name}</p>
<p>年龄:{age}</p>
<p>爱好:{hobby.join('-')}</p>
</div>
props的特点
1. 可以给组件传递任意类型的数据
2. props是只读对象,只能读取属性的值,不能修改props
3. 可以通过(...)扩展运算符来将对象的多个属性分别传入子组件
4.如果父组件传入的是动态的state数据,那一旦父组件更新state数据,子组件也会更新
props校验(了解)
作用:对于组件来说,props是外来的,无法保证组件使用者传入什么格式的数据,如果传入的数据格式不对,可能会导致组件内部报错,允许在创建组件的时候,就指定props的类型,格式等
实现方式
1.导入prop-type包
import PropTypes from 'prop-types'
2. 使用propTypes来给组件的props添加校验规则
(1)类式组件添加校验规则
// 指定属性名/属性值类型/属性的必要性
static propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired,
likes: PropTypes.array
}
//指定属性的默认值
static defaultProps = {
likes: ['A', 'B', 'C']
}
(2)函数式组件添加校验规则
//函数组件只能这么指定
//FunctionProps.propTypes = {}
//FunctionProps.defaultTypes= {}
(3)props默认值
作用:给props设置默认值,,在未传入时生效
//设置默认值
App.defaultProps = {
pageSize: 10
}
//不传入pageSize属性
非受控组件
表单项不与state数据想向关联,需要手动读取表单元素的值借助ref,使用原生DOM方式来获取表单元素值
ref的作用:获取DOM或组件对象
ref的使用