React 之 函数式组件(二)

React的函数式组件是React组件的一种形式,它使用JavaScript函数而不是类来定义组件。这种组件形式在React 16.8版本引入Hooks之后变得特别流行,因为它使得组件逻辑更加简洁、易于理解和测试。

javascript 复制代码
import React from 'react';  
  
function Welcome(props) {  
//也可以这样写:解构props
//function Welcome({ name,onClick }) {  
  return <h1 onClick={props.onClick}>Hello, {props.name}</h1>;  
}  
  
export default Welcome;

Welcome 是一个函数式组件。它接受一个名为 props 的参数,这个参数是一个对象,包含了传递给组件的所有属性。然后,组件返回一个JSX元素,这个元素会被React渲染到DOM中

React.Component 子类中使用函数式组件Welcome:

javascript 复制代码
class Board extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'World',
    };
  }
  handleClick() {
    this.setState({
      name: 'OK',
    });
  }	
  renderSquare(name) {
    return (
      <Welcome
        name={name}
        onClick={() => this.handleClick()}
      />
    );
  }

  render() {
    
    return (
        <div className="board-row">
          <!--当然可以直接写函数组件<Welcome name={this.state.name} onClick={() => this.handleClick()}/>-->
          {this.renderSquare(this.state.name)}
        </div>
    );
  }
}
相关推荐
spmcor11 分钟前
MinIO本地对象存储部署指南
前端
少年纪15 分钟前
前端用 pdf.js 将 PDF 渲染到 Canvas 再转图片,文字消失的坑
前端
RoyLin16 分钟前
TypeScript设计模式:复合模式
前端·后端·typescript
我是天龙_绍19 分钟前
CSS/JS/图片全挂了,部署后页面白屏/资源加载失败?这两个配置项坑了多少人!
前端
我的小月月19 分钟前
SQLFE:网页版数据库(VUE3+Node.js)
前端·后端
小高00720 分钟前
🌐ES6 这 8 个隐藏外挂,知道 3 个算我输!
前端·javascript·面试
汤姆Tom21 分钟前
Node.js 版本管理、NPM 命令、与 NVM 完全指南
前端·npm·node.js
Alan5215923 分钟前
Java 后端实现基于 JWT 的用户认证和权限校验(含代码讲解)
前端·后端
RoyLin33 分钟前
TypeScript设计模式:策略模式
前端·后端·typescript
brzhang43 分钟前
为什么说低代码谎言的破灭,是AI原生开发的起点?
前端·后端·架构