持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情
上一篇文章我们介绍了jsx的一些样式处理以及React的组件内容，接下来我们将会介绍React的创建组件方式以及React事件处理
React组件的创建方式之抽离为独立JavaScript文件
- 创建Hello.js
- 在Hello.js中导入React
- 创建组件（函数或者类）
- 在Hello.js中导出该组件
- 在index.js中导入Hello组件
- 渲染组件
- 示例代码如下所示：
//index.js
import Hello from './Hello'
//渲染导入的Hello组件
ReactDOM.render(<Hello />,root)
//Hello.js
import React from 'react'
class Hello extends React.Component{
render(){
return <div> Hello Class Component! </div>
}
}
//导出Hello组件
export default Hello
React事件处理之事件绑定
- React事件绑定的语法与DOM事件语法相似
- 语法：on+事件名称={事件处理程序}，比如：onClick={()=>{}}
- 注意：React事件采用驼峰命名法，比如：onMouseEnter,onFocus
- 示例代码如下所示：
class App extends React.Component{
handleClick(){
console.log('单击事件触发了')
}
render(){
return{
<button onClick={this.handleClick}></button>
}
}
}
- 事件对象: 可以通过事件处理程序的参数获取到事件对象,React中的事件对象叫做：合成事件（对象）,合成事件：兼容所有浏览器，无需担心跨浏览器兼容性问题,示例代码如下所示：
function handleclick(e)
e.preventDefault()
console.1og('事件对象'，e)
}
<aonc1ick={handleclick}>点我，不会跳转页面</a>
有状态组件和无状态组件
函数组件又叫做无状态组件，类组件又叫做有状态组件
- 状态(state)即数据
- 函数组件没有自己的状态，只负责数据展示（静）
- 类组件有自己的状态，负责更新，让页面“动”起来 比如计数器案例中，点击按钮让数值加1.0和1就是不同时刻的状态，而由0变为1就表示状态发生了变 化。状态变化后，U也要相应的更新。Ract中想要实现该功能，就要使用有状态组件来完成。
