认识 react 的组件及其事件注册

最新推荐文章于 2024-04-02 12:14:44 发布

我们都是柠檬精诶

最新推荐文章于 2024-04-02 12:14:44 发布

阅读量380

点赞数

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/qq_43392573/article/details/117957977

版权

React 专栏收录该内容

25 篇文章 5 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、React 中的组件
- 1、函数组件
- 2、类组件
二、事件注册

前言

原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错。

提示：以下是本篇文章正文内容，下面案例可供参考

一、React 中的组件

React 中的组件主要分为 函数组件 和 类组件 。

1、函数组件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
function HelloMessage(props) {
	return <h1>Hello {props.name}!</h1>;
}

const element = <HelloMessage name="123"/>;

ReactDOM.render(
	element,
	document.getElementById('example')
);
</script>

</body>
</html>

运行结果：
在这里插入图片描述

2、类组件

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>React 实例</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="example"></div>
    <script type="text/babel">
        class ButtonClick extends React.Component {
            constructor(props) {
                super(props);
                this.state = {
                    isClickOn: true
                }
                this.handelClick = this.handelClick.bind(this);
            }

            handelClick() {
                this.setState(prevState => ({
                    isClickOn: !prevState.isClickOn
                }));
            }

            render() {
                return (
                    <button onClick={this.handelClick}> {this.state.isClickOn ? 'ON' : 'OFF'}</button >
                );
            }
        }
        ReactDOM.render(<ButtonClick />, document.getElementById('example'));
    </script>
</body>

</html>

二、事件注册

1.“函数组件”注册点击事件

代码如下（示例）：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
function Alink(){
  function handleClick(e){
    e.preventDefault();// 链接的阻止默认行为
    alert("被点击了")
  }
  
  return(
  <a href="#" onClick={handleClick}>链接</a>
  )
}
ReactDOM.render(
  <Alink />,
  document.getElementById('example')
);
</script>

</body>
</html>

2.“类组件”注册点击事件

代码如下（示例）：

(1) 在构造函数中绑定 this

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // 这边绑定是必要的，这样 `this` 才能在回调函数中使用
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('example')
);
</script>

</body>
</html>

(2) 使用“属性初始化器语法”绑定 this

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
class LoggingButton extends React.Component {
  // 这个语法确保了 `this` 绑定在  handleClick 中
  // 这里只是一个测试
  handleClick = () => {
    console.log('this is:', this);
  }
 
  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

ReactDOM.render(
  <LoggingButton />,
  document.getElementById('example')
);
</script>

</body>
</html>

(3) 回调函数中使用“箭头函数”绑定 this

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">
class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }
 
  render() {
    //  这个语法确保了 `this` 绑定在  handleClick 中
    return (
      <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>
    );
  }
}
ReactDOM.render(
  <LoggingButton />,
  document.getElementById('example')
);
</script>

</body>
</html>

(4) 总结

使用(3)这个语法有个问题就是每次 LoggingButton 渲染的时候都会创建一个不同的回调函数。在大多数情况下，这没有问题。然而如果这个回调函数作为一个属性值传入低阶组件，这些组件可能会进行额外的重新渲染。我们通常建议在构造函数中绑定或使用属性初始化器语法来避免这类性能问题(也就是（1）（2）)。

我们都是柠檬精诶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
认识 react 的组件及其事件注册

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、React 中的组件1、函数组件2、类组件二、事件注册1.“函数组件”注册点击事件2.“类组件”注册点击事件(1) 在构造函数中绑定 this(2) 使用“属性初始化器语法”绑定 this(3) 回调函数中使用“箭头函数”绑定 this(4) 总结前言原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组
复制链接

扫一扫

专栏目录