React学习（二）

1.React组件的两种创建方式

1.使用函数创建组件
2.使用类创建组件

1.1使用函数创建组件

·函数组件：使用JS的函数（或箭头函数）创建的组件
·函数名称必须以大写字母开头
·函数组件必须有返回值，表示该组件的结构
·如果返回值为null，表示不渲染任何内容
·渲染函数组件：用函数名作为组件标签名(组件标签可以是单标签也可以是双标签）

function Hello(){
   
	return (
		<div>这是一个函数组件！</div>
	)
}
ReactDOM.render(<Hello />,document.getElementById('root'))

ps：使用箭头函数创建组件

const Hello = () => <div>这是一个函数组件！</div>
ReactDOM.render(<Hello />,document.getElementById('root'))

1.2使用类创建组件（推荐）

·类组件：使用ES6的class创建的组件
·类名必须以大写字母开头
·类组件应该继承React.Component父类，从而可以使用父类中提供的方法或属性
·类组件必须提供render（）方法
·render（）方法必须有返回值，表示该组件的结构

class Hello extends React.Component{
   
	render(){
   
		return(
			<div>这是一个类组件！</div>
		)
	}
}
ReactDOM.render(<Hello />,document.getElementById('root'))

1.3抽离为独立JS文件

1.创建Hello.js
2.在Hello.js中导入React
3.创建组件（函数或类）
4.在Hello.js中导出该组件
5.在index.js中导入Hello组件
6.渲染组件

//Hello.js
import React from 'react'
class Hello extends React.Component{
   
	render(){
   
		return(
			<div>Hello Class Component!</div>
		)
	}
}
//导出Hello组件
export default Hello

//index.js
import Hello from './Hello'
//渲染导入的Hello组件
ReactDOM.render(<Hello />,'root')

2.React事件处理

2.1事件绑定

·React事件绑定语法与DOM事件语法相似
·语法：on+事件名称 = {事件处理程序}，比如：onClick = {（） = >{}}
·注意：React事件采用驼峰命名法，比如：onMouseEnter、onFocus

class App extends React.Component{
   
	handleClick(){
   
		console.log('单击事件触发了')
	}
	render(){
   
		return(
			<button onClkick = {
   this.handleClick}>点我</button>
		)
	}
}
ReactDOM.render(<App />,document.ge