React -岩石教程

特点

组件化开发：通过将 UI 拆分为独立的、可重用的组件，简化开发和维护。
虚拟 DOM：使用虚拟 DOM 进行高效的 DOM 更新，提升性能。
单向数据流：采用单向数据流，使数据在应用中的流动更加可控和可预测。
JSX 语法：结合 JavaScript 和 HTML 的语法，提供直观的组件定义方式。
广泛的社区支持：拥有庞大的社区和丰富的生态系统，提供各种工具和库的支持。
灵活性和可扩展性：可以与其他库或框架（如 Redux、React Router）无缝集成，构建复杂的应用。

使用场景

单页应用（SPA）：构建复杂的单页应用，提供流畅的用户体验。
动态交互式 UI：开发需要频繁更新和交互的用户界面。
可重用组件库：创建和维护可重用的 UI 组件库，提高开发效率和一致性。
跨平台开发：与 React Native 结合，实现跨平台移动应用开发。

安装方式

使用 npm 安装 React：

npm install react react-dom

使用 Create React App 快速创建 React 项目：

npx create-react-app my-app
cd my-app
npm start

使用示例

创建一个简单的 React 组件

import React from 'react';
import ReactDOM from 'react-dom';

function HelloWorld() {
  return <h1>Hello, world!</h1>;
}

ReactDOM.render(<HelloWorld />, document.getElementById('root'));

状态管理

使用 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>
  );
}

export default Counter;

生命周期方法

使用 useEffect 钩子处理组件生命周期：

import React, { useEffect } from 'react';

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

  return <div>Fetching data...</div>;
}

export default DataFetcher;

常用 API 介绍

React.createElement(type, [props], [...children])：创建并返回一个新的 React 元素。

const element = React.createElement('div', { className: 'container' }, 'Hello, world!');

React.Component：用于定义类组件的基类。

class MyComponent extends React.Component {
  render() {
    return <div>Hello, world!</div>;
  }
}

ReactDOM.render(element, container[, callback])：将 React 元素渲染到指定的 DOM 容器中。
```
ReactDOM.render(<App />, document.getElementById('root'));
```
useState(initialState)：定义和管理组件的状态钩子。
```
const [count, setCount] = useState(0);
```
useEffect(callback, [dependencies])：处理副作用的钩子，类似于生命周期方法。
```
useEffect(() => {
  // 执行副作用
}, []);
```
useContext(Context)：接收一个 context 对象，并返回当前 context 值。
```
const value = useContext(MyContext);
```
useReducer(reducer, initialState)：用于状态管理的钩子，适用于复杂的状态逻辑。
```
const [state, dispatch] = useReducer(reducer, initialState);
```
useMemo(callback, [dependencies])：返回一个 memoized 值，仅在依赖项变化时重新计算。
```
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
```
useCallback(callback, [dependencies])：返回一个 memoized 回调函数，仅在依赖项变化时重新创建。
```
const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);
```

高级用法

Context API 使用 Context API 在组件树中传递数据，而无需逐层传递 props：

const MyContext = React.createContext();

function App() {
  const value = { name: 'React' };

  return (
    <MyContext.Provider value={value}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

function ChildComponent() {
  const context = useContext(MyContext);
  return <div>{context.name}</div>;
}

自定义钩子 创建自定义钩子以复用逻辑：

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 App() {
  const { data, loading } = useFetch('https://api.example.com/data');

  if (loading) return <div>Loading...</div>;
  return <div>{JSON.stringify(data)}</div>;
}

使用 React Router 进行路由管理

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

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

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

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

export default App;

React

特点

使用场景

安装方式

使用示例

常用 API 介绍

高级用法

官方资料