React 之 函数式组件（二）

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

import React from 'react';  
  
function Welcome(props) {  
//也可以这样写：解构props
//function Welcome({ name，onClick }) {  
  return <h1 onClick={props.onClick}>Hello, {props.name}</h1>;  
}  
  
export default Welcome;
1
2
3
4
5
6
7
8
9

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

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

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>
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31