React组件创建与事件绑定的实现方法

目录

• 1、组件创建方式
• 方式一-函数创建组件
• 方式二-使用类创建组件
• 2、事件绑定
• 方式一-类组件绑定事件
• 方式二-函数组件绑定事件

周末在家，练习React，记录下来，方便查看。

本期学习React组件创建与时间绑定

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创建的组件

约定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>
                )
        }
}

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

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

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

原文地址：https://blog.csdn.net/u012190388/article/details/128438333