组件和组件属性

[传送门](组件 & Props – React (reactjs.org))
组件：包含内容、样式和功能的UI单元

创建一个组件

特别注意：组件的名称首字母必须大写

如果你的组件的名称首字母小写了，react会认为这个一个普通的react元素,在组件中可以使用的很多属性就无法在你的组件中使用了

1. 函数组件

返回一个React元素
(1).定义一个函数组件

import React from 'react'

export default function MyFuncComp(props) {
    // return <h1>函数组件的内容</h1>
    return <h1>函数组件，目前的数字：{props.number}</h1>
}

(2).函数组件的用法
a.当成普通函数来调用
比如以下案例:

import React from "react";
import ReactDOM from 'react-dom';
const container=document.getElementById('root');

function MyFuncComp(props) {
   return <h1>函数组件</h1>
}
ReactDOM.render(
   <div>
   {MyFuncComp()}
</div>,container);

这个时候运行项目，打开浏览器窗口，就可以看到组件已经被渲染到窗口里了,这个方式没有构建组件结构，
因此在后面如果我们要对组件做一些优化的时候就会比较麻烦，日常开发中一般很少使用这种方式来渲染组件，而会使用以下方式渲染我们的组件
b.当react元素来使用

import React from "react";
import ReactDOM from 'react-dom';

const container=document.getElementById('root');

function MyFuncComp(props) {
    return <h1>函数组件,当前数字为{props.number}</h1>
}
//使用组件，生成的，仍然是一个React元素，变化的，只是type值
ReactDOM.render(
  <MyFuncComp number={10} />,container);

这个方式渲染的组件拥有清晰的组件结构，对于我们后面进行调试，优化都很方便

2. 类组件

必须继承React.Component

必须提供render函数，用于渲染组件

组件的属性

1. 对于函数组件，属性会作为一个对象的属性，传递给函数的参数props

import React from "react";
import ReactDOM from 'react-dom';


const container=document.getElementById('root');

function MyFuncComp(props) {
    console.log(props,'props');//{number: 10, obj: {name: 'zhangsan', age: 18}}
    return <h1>函数组件,当前数字为{props.number}</h1>
};
ReactDOM.render(
  <>
  <MyFuncComp number={10} obj={{name:'zhangsan',age:18}}></MyFuncComp>
  </>,container);

2. 对于类组件，属性会作为一个对象的属性，传递给构造函数的参数

  //在父组件中使用
  import ClassCom from './components/ClassCom.jsx'
  ReactDOM.render(
  <>
  <ClassCom number={10} obj={{name:'zhangsan',age:18}}></ClassCom>
  </>,container);

// ClassCom组件
import React, { Component } from 'react'
export default class ClassCom extends Component {
    //这里不需要我们手动去继承父组件的props，react会帮我们完成这件事 
    //所以以下这段注释掉的代码存不存在都不影响我们呢在render函数中通过 this.props.obj来访问父组件传递过来的obj对象
    // constructor(props){
    //     console.log(props,'propsClassCom');
    //     super(props);
    // }
  render() {
    return (
      <div>
        年龄:{this.props.obj.age}
        <br></br>
        姓名:{this.props.obj.name}
      </div>
    )
  }
}

注意：组件的属性，应该使用小驼峰命名法
之前学习的React元素，本质上，就是一个组件（内置组件）

组件无法改变父组件传递过来的属性。(单向数据流)

React中的哲学：数据属于谁，谁才有权力改动

React中的数据，自顶而下流动

import React from 'react'

export default function MyFuncComp(props) {
    console.log(props,'props');//{number: 10, obj: {name: 'zhangsan', age: 18}}
    // props.number=11;//尝试修改父组件传递过来的属性 导致浏览器报错
    props.obj.name='lisi';//修改对象身上的属性则不会报错 值也能修改成功 但是强烈不建议去修改父组件传递过来的属性 数据属于谁 谁才有权力去修改
    return <h1>函数组件,当前数字为{props.obj.name}</h1>
}

demo:写一个学生列表的demo，练习一下组件的内容
StuInfo组件，负责展示每一个学生的信息

import React from 'react';
export default function StuInfo(props) {
  return (
   <li>
    <h3>{'{'}姓名{'}'}：{props.stu.name}</h3>
    <p>年龄：{props.stu.age}</p>
    <p>性别：{props.stu.gender===1?'男':'女'}</p>
    <p>出生年份：{props.stu.year}</p>
   </li>
  )
}

StuList组件，负责把所有的学生信息集合在一起展示

import React from 'react'
import StuInfo from './StuInfo.jsx'
export default function StuList(props) {
    console.log(props.stuList,'stuList');
    const lis=props.stuList.map((stu,index)=><StuInfo stu={{...stu}} key={index}></StuInfo>);
  return (
    <ul>
      {lis}  
    </ul>
  )
}

在入口文件中使用

import React from "react";
import ReactDOM from 'react-dom';
import StuList from './components/StuList.jsx'
const container=document.getElementById('root');
const stuList=[
    {"name": "张伟", "age": 21, "gender": 0, "year": 1999},  
    {"name": "李婷", "age": 20, "gender": 1, "year": 2001},  
    {"name": "王明", "age": 22, "gender": 1, "year": 1998},  
    {"name": "赵佳", "age": 21, "gender": 0, "year": 2000},  
    {"name": "刘杰", "age": 24, "gender": 0, "year": 1997},  
    {"name": "陈曦", "age": 22, "gender": 1, "year": 1999},  
    {"name": "孙丽", "age": 21, "gender": 0, "year": 2001},  
    {"name": "周强", "age": 23, "gender": 1, "year": 1998},  
    {"name": "吴敏", "age": 20, "gender": 0, "year": 1999},  
    {"name": "郑磊", "age": 22, "gender": 1, "year": 2000}  
   ];

ReactDOM.render(
  <>
  <StuList stuList={stuList}></StuList>
  </>,container);

组件状态

组件状态

组件状态：组件可以自行维护的数据

组件状态仅在类组件中有效

状态（state），本质上是类组件的一个属性，是一个对象

状态初始化

状态的变化

不能直接改变状态：因为React无法监控到状态发生了变化

必须使用this.setState({})改变状态

一旦调用了this.setState，会导致当前组件重新渲染

组件中的数据

1. props：该数据是由组件的使用者传递的数据，所有权不属于组件自身，因此组件无法改变该数据
2. state：该数据是由组件自身创建的，所有权属于组件自身，因此组件有权改变该数据
   demo:封装一个倒计时组件

import React, { Component } from 'react'

export default class Tick extends Component {
    constructor(props){
        super(props);
        console.log(props,'props');
        //初始化状态
        this.state={
            left:this.props.number
        }
        this.timer=setInterval(()=>{
            let left=this.state.left;
            if(left===0){
                clearInterval(this.timer); return
            }
            this.setState({
                left:left-1
            })

        },1000);
    }
  render() {
    return (
      <div>
        <h1>倒计时时间：{this.state.left}</h1>
      </div>
    )
  }
}