[JavaScript知识库]React组件、React脚手架、组件的props属性

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的使用