React组件创建与事件绑定

周末在家，练习React，记录下来，方便查看。
本期学习React组件创建、事件绑定和状态state基本使用。

1、组件创建方式

方式一、函数创建组件

使用JS函数或箭头函数创建组件，又叫无状态组件，只负责数据的展示。
约定1：函数名必须是大写字母开头
约定2：函数组件必须有返回值，表示该组件的结构
如果返回值为null，则不渲染任何内容
参考代码如下图所示。

// 方式1：JS函数
function Hello(){
    
    
	return (
		<div>函数组件</div>
	)
}
// 方式2：箭头函数
const Hello = () => <div>函数组件</div>
// 渲染函数组件
ReactDOM.render(<hello />,document.getElementById('root'))

方式二、使用类创建组件

使用ES6的class创建的组件，又叫有状态组件，负责更新UI，让页面“动起来”。
约定1：类名必须是大写字母开头；
约定2: 类组件应该继承 React.Component 父类，可使用父类提供的方法和属性；
约定3：类组件必须提供render() 方法；
约定4：render 方法必须有返回值，表示该组件结构。
参考代码如下图所示。

class Hello extends React.Component {
    
    
	render(){
    
    
		return  <div>类组件</div>
	}
}
// 渲染函数组件
ReactDOM.render(<hello />,document.getElementById('root'))

2、事件绑定

React 事件绑定与DOM时间语法相似。
语法：on+事件名称={事件处理程序} 如 onClick={() => {}}
注意：React 事件采用驼峰命名法，如 onMouseEnter

方式一、类组件绑定事件

通过 this 关键字 获取事件处理程序。

// 类组件绑定事件
class APP extends React.Component{
    
    
	// 事件处理程序
	handleClick(){
    
    
	console.log('类组件中事件处理函数')
	}
	render() {
    
    
		return (
			<button onclick={
    
    this.handleClick}>点我</button>
		)
	}
}
// 渲染函数组件
ReactDOM.render(<APP />,document.getElementById('root'))

方式二、函数组件绑定事件

函数定义用 function，直接通过 函数名 即可获取事件处理程序。

// 函数组件绑定事件
function APP(){
    
    
	// 事件处理程序
	function handleClick(){
    
    
		console.log('函数组件中事件处理函数')
	}
	return (
		<button onclick={
    
    handleClick}>点我</button>
	)
}
// 渲染函数组件
ReactDOM.render(<APP />,document.getElementById('root'))

3、状态state基本使用

state 状态即数据，是组件内部的私有数据，只能在组件内部使用
通过 this.state 获取状态的值。

// 类组件绑定事件
class APP extends React.Component{
    
    
	// 方式一、constructor 初始化state
	constructor(){
    
    
		super()
		this.state = {
    
     count : 0 }
	}
	// 方式二、初始化state
	state = {
    
    
		count : 10
	}
	render() {
    
    
		return (
			<div>
				<h1>当前state的值为：{
    
    this.state.count}</h1>
			</div>
		)
	}
}
// 渲染函数组件
ReactDOM.render(<APP />,document.getElementById('root'))