如何写react 组件

创建React组件的基本方法

React组件可以通过函数式组件或类组件两种方式创建。以下是具体实现方法：

函数式组件

函数式组件是当前React开发中的首选方式，代码更简洁：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

使用ES6箭头函数写法：

const Welcome = (props) => {
  return <h1>Hello, {props.name}</h1>;
}

类组件

类组件是传统写法，需要继承React.Component：

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

组件使用props

props是组件接收的外部参数：

function Greeting(props) {
  return <p>Welcome, {props.userName}!</p>;
}

// 使用时
<Greeting userName="John" />

组件使用state

函数式组件使用useState Hook管理状态：

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

类组件通过this.state管理状态：

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

组件生命周期

函数式组件使用useEffect Hook处理生命周期：

import { useEffect } from 'react';

function Example() {
  useEffect(() => {
    console.log('Component mounted');
    return () => console.log('Component will unmount');
  }, []);

  return <div>Example</div>;
}

类组件通过生命周期方法处理：

class Example extends React.Component {
  componentDidMount() {
    console.log('Component mounted');
  }

  componentWillUnmount() {
    console.log('Component will unmount');
  }

  render() {
    return <div>Example</div>;
  }
}

事件处理

React事件使用驼峰命名法：

function ActionLink() {
  const handleClick = (e) => {
    e.preventDefault();
    console.log('Link clicked');
  };

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

样式处理

内联样式使用对象形式：

const divStyle = {
  color: 'blue',
  backgroundColor: 'lightgray'
};

function StyledComponent() {
  return <div style={divStyle}>Styled text</div>;
}

使用CSS类名：

import './MyComponent.css';

function MyComponent() {
  return <div className="my-style">Styled text</div>;
}

组件组合

组件可以组合使用形成更复杂的UI：

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

最佳实践

1. 组件命名使用PascalCase
2. 单一职责原则，保持组件小巧
3. 合理拆分大型组件
4. 使用PropTypes进行类型检查
5. 优先使用函数式组件和Hooks
6. 避免在render方法中进行复杂计算