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>
    );
  }
}
相关推荐
汪敏wangmin9 分钟前
Fiddler-抓包后直接生成Loadrunner脚本或者Jmeter脚本
前端·jmeter·fiddler
彤银浦1 小时前
Web学习笔记3
前端·笔记·学习·html5
江城开朗的豌豆1 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆1 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
我在北京coding1 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui
江城开朗的豌豆1 小时前
v-for中key值的作用:为什么我总被要求加这个'没用的'属性?
前端·javascript·vue.js
angen20181 小时前
Ruby如何采集直播数据源地址
前端·chrome
goldenocean2 小时前
React之旅-05 List Key
前端·javascript·react.js
亮学长2 小时前
lodash不支持 Tree Shaking 而 lodash-es可以
大数据·前端·elasticsearch