React组件【2】

组件和组件属性

创建一个组件

组件名的首字母必须大写

• why？
  react元素分为普通的react元素会生成html元素，另外一种是组件元素，组件本身是一个函数，返回的是React元素，type值为一个函数。

function MyFunc(){
    return <h1>this is function component</h1>
}
const comp = MyFunc();

console.log(comp); //打印出来的仍然是一个React元素，只是type值变成了一个函数。
React.render(<div>
    {comp}
</div>,document.getElementById('root'));

• 组件分为函数组件和类组件。

函数组件

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

/**
 * 函数组件 函数首字母必须大写
 * @returns 必须返回一个react元素 React.createElement()或者JSX
 */
function MyFunc(){
    return <h1>this is function component</h1>
}
// 第一种方式不建议
React.render(<div>
    {MyFunc()}
</div>,document.getElementById('root'));

// 第二种方式 一般写这种，能在浏览器的react插件看到组件信息
ReactDOM.render(<div>
    <MyFunc/>
</div>,document.getElementById('root'));

类组件

// 类组件必须继承自React.Component
export default class MyClassComp extends React.Component {
    /**
     * 必须返回一个React元素
     */
    render(){
        return <h1>THIS IS class component</h1>
    }
}

组件的属性

函数组件属性

export default function MyFunc(props){
    return <h1>今天{props.num}度。</h1>;
}
--------------------------------------
 <MyFunc num={34}/>

类组件属性

export default class MyClassComp extends React.Component {
    // constructor(props){
    //     super(props); // this.props = props;
    //     console.log(props,this.props,props === this.props);
    // }
    /**
     * 必须返回一个React元素
     */
    render(){
        return <h1>THIS IS class component{this.props.num}</h1>
    }
}
-----------------------------------------
<MyClassComp num="24"/>

• 传递的数据类型可以是任何类型。

<MyClassComp num="24" obj={{a:"1",b:"2"}} ui={<h1>this is h1</h1>}/>

属性的值不能改，若是属性是对象，则监控不到可以改，但是不要改，容易出现混乱

React数据是自定向下流动的，单向数据流

组件状态

组件自己的数据，组件状态仅在类组件中有效。状态（state），本质上是类组件的一个属性，一个对象，需要初始化。

• 组件组件初始化

• 组件改变

不能直接改变状态：因为React不能监控变化

必须使用this.setState({})改变状态,然后自动触发渲染。

export default class Tick extends Component {
    // 2.初始化状态
    // state = {
    //     left:this.props.number
    // }
    constructor(props){
        super(props);
        // 1.初始化状态
        this.state = {
            left:this.props.number
        };
        this.timer = setInterval(()=>{
            // this.state.left--; 不要直接改变
            // 通过this.setState来改变，然后自动重新渲染
            this.setState({
                left:this.state.left - 1
            })
        },1000)
    }
    render() {
        return (
            <div>
                倒计时剩余时间：{this.state.left}
            </div>
        )
    }
}

export default class Test extends Component {
    constructor(props){
        super(props);
        this.state={
            n:this.props.n
        }
        setInterval(()=>{
            this.setState({
                n:this.state.n - 1
            })
        },1000)
    }
    render() {
        return (
            <div>
                <B n={this.state.n}></B>
            </div>
        )
    }
}

function B(props){
    return <>
    <div>B组件渲染了{props.n}</div>
    <C n={props.n}></C>
    </>
}

function C(props){
    return <div>c组件渲染了{props.n}</div>
}

组件中的数据

• props，由其他组件传过来的，不能改。

• state，属于组件自身，通过this.setState({})来改。