react 实现

React 实现

React 是一个用于构建用户界面的 JavaScript 库，广泛应用于现代前端开发。以下是 React 实现的核心内容：

组件化开发

React 的核心思想是组件化开发。组件是独立的、可复用的代码单元，可以将 UI 拆分为多个部分。组件分为函数组件和类组件。

函数组件示例：

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

类组件示例：

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

状态管理

React 通过状态（state）管理组件内部数据。函数组件使用 useState Hook，类组件使用 this.state。

函数组件状态管理：

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

类组件状态管理：

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

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

生命周期方法

类组件有生命周期方法，函数组件通过 useEffect Hook 实现类似功能。

类组件生命周期：

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

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

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

函数组件生命周期：

function Example() {
  useEffect(() => {
    console.log('Component mounted');

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

  return <div>Lifecycle Example</div>;
}

事件处理

React 事件处理使用驼峰命名法，例如 onClick、onChange。

function HandleClick() {
  const handleClick = () => {
    alert('Button clicked');
  };

  return <button onClick={handleClick}>Click Me</button>;
}

条件渲染

根据条件渲染不同内容，可以使用 if 语句、三元运算符或逻辑与运算符。

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <p>Welcome back!</p> : <p>Please sign in.</p>}
    </div>
  );
}

列表渲染

使用 map 方法渲染列表，需要为每个列表项分配唯一的 key。

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

表单处理

React 表单元素分为受控组件和非受控组件。受控组件通过状态管理表单数据。

function NameForm() {
  const [name, setName] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Submitted name: ${name}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

上下文（Context）

Context 用于跨组件层级传递数据，避免 props 逐层传递。

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

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Themed Button</button>;
}

路由管理

使用 react-router-dom 实现客户端路由。

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <Link to="/">Home</Link>
          <Link to="/about">About</Link>
        </nav>

        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

性能优化

使用 React.memo、useMemo 和 useCallback 优化性能。

const MemoizedComponent = React.memo(function MyComponent(props) {
  /* render using props */
});

function ExpensiveCalculation({ value }) {
  const computedValue = useMemo(() => {
    return computeExpensiveValue(value);
  }, [value]);

  return <div>{computedValue}</div>;
}

function ParentComponent() {
  const [count, setCount] = useState(0);
  const increment = useCallback(() => {
    setCount((c) => c + 1);
  }, []);

  return <ChildComponent onClick={increment} />;
}