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>
    );
  }
}
相关推荐
Wiktok1 天前
pureadmin的动态路由和静态路由
前端·vue3·pureadmin
devii661 天前
html.
前端
掘金安东尼1 天前
为什么浏览器要限制 JavaScript 定时器?
前端·javascript·github
学前端搞口饭吃1 天前
react context如何使用
前端·javascript·react.js
GDAL1 天前
为什么Cesium不使用vue或者react,而是 保留 Knockout
前端·vue.js·react.js
IT_陈寒1 天前
《Java 21新特性实战:5个必学的性能优化技巧让你的应用快30%》
前端·人工智能·后端
小谭鸡米花1 天前
uni小程序中使用Echarts图表
前端·小程序·echarts
芜青1 天前
【Vue2手录11】Vue脚手架(@vue_cli)详解(环境搭建+项目开发示例)
前端·javascript·vue.js
a别念m1 天前
前端架构-CSR、SSR 和 SSG
前端·架构·前端框架
BillKu1 天前
Vue3 + Element-Plus 抽屉关闭按钮居中
前端·javascript·vue.js