【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}/>