【前端】react入门级写法介绍和部分Demo

React 是一个由 Facebook 维护的用于构建用户界面的 JavaScript 库，特别是单页应用中数据渲染部分。它允许开发者创建复杂的UI界面，并且高效地更新和渲染当数据变化时的视图。React 的核心理念是组件化开发，即通过组合小的、可重用的代码片段（组件）来构建整个应用程序。

以下是十个常见的 React 写法介绍以及相应的 Demo 举例，涵盖从基础到高级的概念。

1. 函数组件与类组件

函数组件是 React 中推荐的组件形式，使用起来更简洁，并且支持 Hooks。

Demo：

// 函数组件
function Greeting() {
  return <h1>Hello, world!</h1>;
}

// 类组件（旧版）
class GreetingClass extends React.Component {
  render() {
    return <h1>Hello, world!</h1>;
  }
}

2. 使用 useState 管理状态

useState 是一个 Hook，它允许函数组件拥有状态。

Demo：

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <>
      <p>你点击了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>点击我</button>
    </>
  );
}

3. 使用 useEffect 执行副作用操作

useEffect Hook 用于处理副作用，比如数据获取、订阅或手动修改 DOM。

Demo：

import { useEffect, useState } from 'react';

function Example() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 假设这里执行了一个 API 请求
    fetch('/api/data')
      .then(response => response.json())
      .then(setData);
  }, []); // 空数组意味着只在首次渲染时调用

  return <div>{data ? data : '加载中...'}</div>;
}

4. Props 的传递

Props 是父组件向子组件传递数据的方式。

Demo：

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

// 使用
<Welcome name="Sara" />

5. 使用 useContext 共享状态

useContext 可以让你在多个组件间共享状态，而不需要通过 props 逐层传递。

Demo：

const ThemeContext = React.createContext('light');

function ThemedButton() {
  return (
    <ThemeContext.Consumer>
      {theme => <button style={{ background: theme }}>I am styled by context!</button>}
    </ThemeContext.Consumer>
  );
}

// 使用
<ThemeContext.Provider value="dark">
  <ThemedButton />
</ThemeContext.Provider>

6. 条件渲染

根据条件选择性地渲染组件。

Demo：

function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

7. 列表渲染

遍历数组并渲染列表项。

Demo：

function NumberList({ numbers }) {
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>{number}</li>
  );
  return <ul>{listItems}</ul>;
}

8. 表单处理

管理受控组件，即表单元素的值由 React 状态控制。

Demo：

function NameForm() {
  const [value, setValue] = useState('');

  function handleChange(event) {
    setValue(event.target.value);
  }

  function handleSubmit(event) {
    alert('提交的名字: ' + value);
    event.preventDefault();
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        名字:
        <input type="text" value={value} onChange={handleChange} />
      </label>
      <input type="submit" value="提交" />
    </form>
  );
}

9. 高阶组件（HOC）

高阶组件是一个返回另一个组件的函数。

Demo：

function withSubscription(WrappedComponent, selectData) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.handleChange = this.handleChange.bind(this);
      this.state = {
        data: selectData(DataSource, props)
      };
    }

    componentDidMount() {
      // ... subscribe to data source
    }

    componentWillUnmount() {
      // ... unsubscribe from data source
    }

    handleChange() {
      this.setState({
        data: selectData(DataSource, this.props)
      });
    }

    render() {
      // 注意我们如何将所有属性传递给包装组件
      return <WrappedComponent data={this.state.data} {...this.props} />;
    }
  }
}

10. 自定义 Hook

自定义 Hook 是一种复用逻辑的好方法。

Demo：

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}

function DataDisplay() {
  const { data, loading } = useFetch('/api/data');

  if (loading) return <p>Loading...</p>;

  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

这些例子涵盖了 React 应用开发中的常见模式和最佳实践。随着经验增长，会找到更多适合特定需求的写法和技巧。