React 学习之基本模板

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

let bg = {
    background:"skyblue",
    borderBottom:"4px solid red"
}

let element = (
    <div style={bg}>
        <h1>123456</h1>
        <p>666666</p>
    </div>
)
// 创建组建的方式一、函数式组件(简单组件，没有状态组件)  效率要比类组件效率高(因为不需要创建对象) 
function Children(){        // 但是如果组件有状态就不能用这个方式创建（没有状态的组件）
    return (
        <div>
            <h1>函数式组件</h1>
        </div>
    )
}

// 创建组建方式二、类组件(复杂组件)
class Helloworld extends React.Component{
    constructor(props) {
            super(props)    // 调用父类型的构造函数，将props 传给它，说白了就是将props交给父类型去;
            // 初始化状态
            this.state = {
                text:'第一次使用react',
                isShow:true
            }
            // bind 的作用及用法 
            // 改变函数 this 指向 如：fn.bind(obj) 将fn函数中的this指向obj对象 实际可以理解为 obj.fn()
            this.handleClick = this.handleClick.bind(this);
    }
    
    // 新添加的方法，里面的this 不是组件对象，而是 undefined
    handleClick() {
        console.log('handleClick',this) //这里的this指向的是全局作用域，所以会返回undefined
        // 得到状态
        const isShow = !this.state.isShow
        // 更新状态
        this.setState({
            isShow
        });
    }

    // 获取用箭头函数方法写，就不需要进行 this 的转换;
    // handleClick=()=> {
    //     console.log('handleClick',this) //这里的this指向的是全局作用域，所以会返回undefined
    //     // 得到状态
    //     const isShow = !this.state.isShow
    //     // 更新状态
    //     this.setState({
    //         isShow
    //     });
    // }

    // 重写组件类的方法，组件中本来就有这个方法
    render(){
        return (
            <div>
                <h1>{this.state.text}</h1>
                <h2 onClick={this.handleClick}>{this.state.isShow ? '显示了' : '隐藏了'}</h2>
            </div>
        )
    }
}

// 渲染组件标签
ReactDOM.render(        // jsx 的语法
    <Helloworld/>,
  document.getElementById('root')   // 将js 的一个普通对象 将它渲染到 dom 上
);

serviceWorker.unregister();