React基础_2(组件.事件.state.受控非受控)

前言

本篇内容主要包含以下内容
1.组件的创建
2.组件的事件绑定
3.state的使用
4.受控组件和非受控组件

正文

React最关键的内容就是组件，组件就是页面中一个个的元素，也可以说是一个个标签，共同组成整个页面.
创建一个组件:

function Hello(){
   
	return (
		<h2>我是一个函数组件</h2>)
	}
ReactDOM.render(<Hello />,document.getElementById('root'))
//函数组件的两个约定:
//1.开头必须是大写字母
//2.必须要有返回值，返回值就是这个组件的结构

//使用类创建组件
class Hello extends React.Component{
   
	render(){
   
		return (<h2>我是一个类组件</h2>)
		}
	}
ReactDOM.render(<Hello />,document.getElementById('root'))
/*
类组件的四个约定:
1.开头必须是大写
2.必须继承自React.Component
3.必须有render()方法
4.render()方法必须有返回值
*/

将组件抽离为独立的js文件，在使用时导入即可.

import React from "react";
import {
    render } from "react-dom";
class Hello extends React.Component{
   
    render(){
   
        return(
            <div>Hello JSX!!</div>
        )
    }
}

export default Hello;//设置默认导出;

//导入渲染即可
import Hello from './Hello';
ReactDOM.render(<Hello />,document.getElementById('root'))

React中的事件绑定：

//类组件，值得注意的是引用函数时要用this.函数名引用，函数前不需要加function;
class App extends React.Component{
   
    handClick(){
   
        console.log("事件触发")
    }
    render(){
   
        return (
            <div>
                <button onClick={
   this.handClick}>点击我</button>
            </div>
        )
    }
}

ReactDOM.render(<App />,document.getElementById('root'))

function App(){
   
    function handClick(){
   
        console.log("事件触发了")
    }

    return (
        <button onClick={
   handClick}>单击触发事件<