当前位置：首页 > React

react实现功能

2026-01-26 13:13:43React

React 实现功能的方法

React 是一个用于构建用户界面的 JavaScript 库，广泛应用于现代 Web 开发中。以下是几种常见的功能实现方法：

状态管理

使用 useState 钩子来管理组件的局部状态。例如，实现一个计数器功能：

import React, { useState } from 'react';

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

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

组件通信

父组件通过 props 向子组件传递数据和方法：

function Parent() {
  const [message, setMessage] = useState('Hello from Parent');

  return <Child message={message} updateMessage={setMessage} />;
}

function Child({ message, updateMessage }) {
  return (
    <div>
      <p>{message}</p>
      <button onClick={() => updateMessage('Updated message')}>Update</button>
    </div>
  );
}

生命周期管理

使用 useEffect 钩子处理副作用和生命周期事件：

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

表单处理

受控组件方式处理表单输入：

function Form() {
  const [inputValue, setInputValue] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(inputValue);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

路由管理

使用 React Router 实现页面导航：

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

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

数据获取

使用 fetch 或 axios 获取远程数据：

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

useEffect(() => {
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => setData(data));
}, []);

性能优化

使用 React.memo 和 useMemo 避免不必要的渲染：

const MemoizedComponent = React.memo(function MyComponent(props) {
  /* 仅当 props 改变时才会重新渲染 */
});

const computedValue = useMemo(() => expensiveCalculation(input), [input]);

上下文管理

使用 Context API 共享全局状态：

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>;
}

自定义钩子

封装可复用的逻辑：

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return width;
}

错误边界

捕获组件树中的 JavaScript 错误：

react实现功能

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    logErrorToService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}