夜游猿
夜游猿

React 进阶阶段学习计划

React 进阶阶段学习计划

目标

  • 掌握自定义Hooks的创建和使用。
  • 深入理解上下文（Context）和Redux的高级用法。
  • 学会服务端渲染（SSR）。
  • 深入探讨性能优化技巧。

学习内容

自定义Hooks

创建和使用自定义Hooks

  • 自定义Hooks：用于提取组件逻辑，使代码更加模块化和复用。

  • 示例：

    // useFetch.js
import { useState, useEffect } from 'react';

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

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        const json = await response.json();
        setData(json);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

    // App.js
import React from 'react';
import useFetch from './useFetch';

function App() {
  const { data, loading, error } = useFetch('https://jsonplaceholder.typicode.com/posts');

  if (loading) return 
    Loading...
    ;
  if (error) return 
    Error: {error.message}
    ;

  return (
    
    
      
    Data from API
    
      
      
        {data.map(item => (
          
    • {item.title}
      • 
        ))}
      
    
    
    
  );
}

export default App;

上下文（Context）和Redux的高级用法

上下文（Context）的高级用法
  • Context Consumer：用于在函数组件中消费Context。
  • 示例：
    // ThemeContext.js
import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

// 提供者组件
function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    
      {children}
    
  );
}

// 消费者组件
function ThemedButton() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    
  );
}

// App.js
import React from 'react';
import ThemeProvider from './ThemeProvider';
import ThemedButton from './ThemedButton';

function App() {
  return (
    
      
    
  );
}

export default App;
Redux的高级用法

  • Redux Toolkit：简化Redux的开发流程。

  • 安装：

    npm install @reduxjs/toolkit react-redux

  • 示例：

    // store.js
import { configureStore, createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
  },
});

const store = configureStore({
  reducer: {
    counter: counterSlice.reducer,
  },
});

export const { increment, decrement } = counterSlice.actions;
export default store;

    // App.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './store';
import { Provider } from 'react-redux';
import store from './store';

function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    
    
      
    Count: {count}
    
      
      
    
    
  );
}

function App() {
  return (
    
      
    
  );
}

export default App;

服务端渲染（SSR）

Next.js

  • Next.js：一个流行的React框架，支持服务端渲染。

  • 安装：

    npx create-next-app@latest my-app
cd my-app
npm run dev

  • 示例：

    // pages/index.js
import { useState } from 'react';

export default function Home() {
  const [count, setCount] = useState(0);

  return (
    
    
      
    Welcome to Next.js!
    
      
    Count: {count}
    
      
    
    
  );
}

    // pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' });
}

性能优化的深入探讨

使用React Profiler
  • React Profiler：用于分析组件的渲染性能。
  • 启用Profiler：
    import React, { Profiler } from 'react';

function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) {
  console.log({ id, phase, actualDuration, baseDuration, startTime, commitTime });
}

function App() {
  return (
    
      
    
        
    React Profiler Example
    
        {/* 其他组件 */}
      
    
        
  );
}

export default App;
使用React.memo和PureComponent

  • React.memo：用于优化函数组件的性能。

  • PureComponent：用于优化类组件的性能。

  • 示例：

    // MyComponent.js
import React, { PureComponent } from 'react';

class MyComponent extends PureComponent {
  render() {
    return 
    {this.props.value}
    ;
  }
}

export default MyComponent;

    // MyFunctionComponent.js
import React from 'react';

const MyFunctionComponent = React.memo(({ value }) => {
  return 
    {value}
    ;
});

export default MyFunctionComponent;

实践项目

社交媒体应用
  1. 创建项目：
    npx create-next-app@latest social-media-app
cd social-media-app
npm run dev
  2. 创建组件：
    • PostList.js：显示帖子列表
      import React, { useState, useEffect } from 'react';
import axios from 'axios';

function PostList() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        setPosts(response.data);
      })
      .catch(error => {
        console.error('Error fetching posts:', error);
      });
  }, []);

  return (
    
      
      {posts.map(post => (
        
      
          
      {post.title}
      
          
      {post.body}
      
        
      
      ))}
    
      
  );
}

export default PostList;
    • App.js：主组件
      import React from 'react';
import PostList from '../components/PostList';

function Home() {
  return (
    
      
      
      Social Media App
      
      
    
      
  );
}

export default Home;
博客管理系统
  1. 创建项目：
    npx create-react-app blog-management --template typescript
cd blog-management
npm start
  2. 安装axios：
    npm install axios
  3. 创建组件：

    • PostForm.tsx：添加和编辑帖子的表单

      import React, { useState } from 'react';
import axios from 'axios';

interface Post {
  id?: number;
  title: string;
  content: string;
}

interface PostFormProps {
  initialPost?: Post;
  onSubmit: (post: Post) => void;
}

const PostForm: React.FC = ({ initialPost, onSubmit }) => {
  const [post, setPost] = useState({
    id: initialPost?.id,
    title: initialPost?.title || '',
    content: initialPost?.content || '',
  });

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    onSubmit(post);
    setPost({ title: '', content: '' });
  };

  return (
    
      
       setPost({ ...post, title: e.target.value })}
        placeholder="Title"
      />