【React】入门第四天 - 组件和props

组件Component

组件和props的基础使用

---

组件是什么？

---

把逻辑精密的内容放在一个组件中，把不同组件的依赖关系弱化，每个组件尽可能独立

组件的重要内容

1. 组件当中的构建方式

2. 组件内的属性

3. 生命周期

react的组件氛围3个部分分别是属性props，状态state和生命周期，react的组件是一个非常重要的概念，通过组件可以把页面的UI部分分割成独立高复用性的部件，让每一个开发者更加专注于一个个独立的部件。

组件和组件化

组件就是用来页面局部功能的代码集合，简化页面的复杂图，提高运行效率。

组件化 当前程序都是使用组件完成的，这就是一个组件化的应用。

组件的创建

组件的名字采用驼峰命名法首字母大写，单词字母大写。

1. 函数组件/无状态组件

<script type="text/babel">
    // 无状态的组件方式
    function MyComponent(){
        return (
            <div>我是一个无状态组件</div>
        )
    }
    // 使用组件，组件就是自定义标签
    let dom = <MyComponent/>

    ReactDOM.render(dom, document.getElementById("reactDemo"))
</script>

父子组件

<script type="text/babel">
    // 父子组件
    function MyComA(){
        return ( <div>我是子组件A</div> )
    }
    function MyComB(){
        return ( <div>我是子组件B</div> )
    }

    function MyComC () {
        return ( <div>
                    我是父组件A
                    <MyComA />
                    <MyComB />
                    <MyComA />
                </div> )
    }

    let dom = <MyComC />

    ReactDOM.render(dom, document.getElementById("reactDemo"))
</script>

2. 类组件 class

定义语法

class MyComponent extends React.Component {
      render (){
          return (<div>
              {/*此处写内容*/}
          </div>)
      }
  }

props

---

props是什么

props 是react中一个重要的属性，是组件对外的接口，使用props就可以从组件的外部想组件的内部进行数据传递，也可以完成父组件给子组件的数据局传递。

注意 无论是无状态组件还是类组件，都不能修改自身的props

props的使用

1. 无状态组件

function MyComponent(props){
      return (
          <div>我是一个无状态组件 --- props: {props.text}</div>
      )
  }

  let dom = <MyComponent text="这是props.Text"/>

  ReactDOM.render(dom, document.getElementById("reactDemo"))

多值传递，将其变成一个对象，通过{...obj}的方式传递

let user = {
    name: "laoshiren",
    course: "react"
}

function MyComponent(props){
    return (
        <div>
            <div>对象数据 name:
                {props.name}
            </div>
            <div>对象数据 course:
                {props.course}
            </div>
        </div>

    )
}

let dom = <MyComponent {...user}/>

2. 类组件

let user = {
    name: "laoshiren",
    course: "react"
}

class MyComponent extends React.Component {
    render (){
        return (
            <div>
                我是类组件
                <div>name: {this.props.name}</div>
                <div>course: {this.props.course}</div>
            </div>
        )
    }
}

let dom = <MyComponent {...user}/>

props 验证和默认值

---

默认值

1. 无状态组件

设置默认值需要defaultProps

let text = "这是props.Text的value"
let num = 2020

function MyComponent(props){
    return (
        <div>我是一个无状态组件 
        <div>--- props: {props.text}</div>
        <div>--- num: {num}</div>
        </div>
    )
}

MyComponent.defaultProps={
    text: "defaultText",
    num: 0
}

let dom = <MyComponent />

如果是react15.x的版本可以使用||的方式来完成

function MyComponent(props){
  props.name = props.name||"defaultValue"
  
    return (
        <div>我是一个无状态组件 
        <div>--- props: {props.text}</div>
        <div>--- num: {num}</div>
        </div>
    )
}

2. 类组件

let info = {
    num: 2020
}

// 类组件的默认值和props验证
class MyComponent extends React.Component {
    static defaultProps = {
        text: "default"
    }
    render() {
        return (<div>
            我是一个类组件
            <div>--- props: {this.props.text}</div>
            <div>--- num: {this.props.num}</div>
        </div>)
    }
}

let dom = <MyComponent {...info}/>

props 验证

1. 无状态组件

是验证我们传递进来的值是否符合我们期望类型或者要求，项目上线取消props验证

使用props验证必须引入prop-types库

npm i prop-types --save

引入相关js

<script src="/node_modules/prop-types/prop-types.js"></script>

let info = {
    text :"这是props.Text的value",
    num : 2020
}

function MyComponent(props){
    return (
        <div>我是一个无状态组件 
        <div>--- props: {props.text}</div>
        <div>--- num: {props.num}</div>
        </div>
    )
}
// props 验证
MyComponent.propTypes = {
    // 验证text 这个传递进来的值必须是number 类型，数据虽然能正常显示，但是控制台报错
    text: PropTypes.number,
    num: PropTypes.number
}
let dom = <MyComponent {...info}/>

2. 类组件

let info = {
    num: 2020
}

// 类组件的默认值和props验证
class MyComponent extends React.Component {
    static propTypes = {
        num: PropTypes.number
    }
    render() {
        return (<div>
            我是一个类组件
            <div>--- props: {this.props.text}</div>
            <div>--- num: {this.props.num}</div>
        </div>)
    }
}

let dom = <MyComponent {...info}/>