React 进阶阶段学习计划

简介: 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;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 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;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
上下文(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;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
Redux的高级用法
Redux Toolkit:简化Redux的开发流程。

安装:

npm install @reduxjs/toolkit react-redux
1
示例:

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 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;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
服务端渲染(SSR)
Next.js
Next.js:一个流行的React框架,支持服务端渲染。

安装:

npx create-next-app@latest my-app
cd my-app
npm run dev
1
2
3
示例:

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

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

return (


Welcome to Next.js!


Count: {count}




);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// pages/api/hello.js
export default function handler(req, res) {
res.status(200).json({ name: 'John Doe' });
}
1
2
3
4
性能优化的深入探讨
使用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;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
使用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;
1
2
3
4
5
6
7
8
9
10
// MyFunctionComponent.js
import React from 'react';

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

{value}
;
});

export default MyFunctionComponent;
1
2
3
4
5
6
7
8
实践项目
社交媒体应用
创建项目:
npx create-next-app@latest social-media-app
cd social-media-app
npm run dev
1
2
3
创建组件:
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;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
App.js:主组件
import React from 'react';
import PostList from '../components/PostList';

function Home() {
return (


Social Media App




);
}

export default Home;
1
2
3
4
5
6
7
8
9
10
11
12
13
博客管理系统
创建项目:
npx create-react-app blog-management --template typescript
cd blog-management
npm start
1
2
3
安装axios:
npm install axios
1
创建组件:
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"
/>
setPost({ ...post, content: e.target.value })}<br> placeholder="Content"<br> /><br> <button type="submit">Submit</button><br> </form><br> );<br>};</p> <p>export default PostForm;</p> <p>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>31<br>32<br>33<br>34<br>35<br>36<br>37<br>38<br>39<br>40<br>41<br>42<br>43<br>44<br>45<br>46<br>PostList.tsx:显示帖子列表</p> <p>import React, { useState, useEffect } from 'react';<br>import axios from 'axios';<br>import PostForm from './PostForm';</p> <p>interface Post {<br> id: number;<br> title: string;<br> content: string;<br>}</p> <p>const PostList: React.FC = () => {<br> const [posts, setPosts] = useState<Post[]>([]);<br> const [editingPost, setEditingPost] = useState<Post | null>(null);</p> <p> useEffect(() => {<br> axios.get<Post[]>('<a href="https://jsonplaceholder.typicode.com/posts">https://jsonplaceholder.typicode.com/posts</a>')<br> .then(response => {<br> setPosts(response.data.slice(0, 10));<br> })<br> .catch(error => {<br> console.error('Error fetching posts:', error);<br> });<br> }, []);</p> <p> const handleEdit = (post: Post) => {<br> setEditingPost(post);<br> };</p> <p> const handleDelete = (postId: number) => {<br> setPosts(posts.filter(post => post.id !== postId));<br> };</p> <p> const handleSave = (post: Post) => {<br> if (post.id) {<br> setPosts(posts.map(p => (p.id === post.id ? post : p)));<br> } else {<br> setPosts([...posts, post]);<br> }<br> setEditingPost(null);<br> };</p> <p> return (<br> <div className="post-list"><br> {editingPost ? (<br> <PostForm initialPost={editingPost} onSubmit={handleSave} /><br> ) : (<br> <PostForm onSubmit={handleSave} /><br> )}<br> <ul><br> {posts.map(post => (<br> <li key={post.id}><br> <h3>{post.title}</h3><br> <p>{post.content}</p><br> <button onClick={() => handleEdit(post)}>Edit</button><br> <button onClick={() => handleDelete(post.id)}>Delete</button><br> </li><br> ))}<br> </ul><br> </div><br> );<br>};</p> <p>export default PostList;</p> <p>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>31<br>32<br>33<br>34<br>35<br>36<br>37<br>38<br>39<br>40<br>41<br>42<br>43<br>44<br>45<br>46<br>47<br>48<br>49<br>50<br>51<br>52<br>53<br>54<br>55<br>56<br>57<br>58<br>59<br>60<br>61<br>62<br>63<br>App.tsx:主组件</p> <p>import React from 'react';<br>import PostList from './components/PostList';</p> <p>const App: React.FC = () => {<br> return (<br> <div className="App"><br> <h1>Blog Management System</h1><br> <PostList /><br> </div><br> );<br>};</p> <p>export default App;<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>建议<br>定期回顾:每周花时间回顾本周所学内容,确保知识点牢固掌握。<br>参与社区:加入React相关的论坛、Slack群组或Discord服务器,与其他开发者交流心得。<br>阅读源码:尝试阅读一些复杂的React库的源码,提高代码理解和分析能力。<br>希望这个学习计划能够帮助你系统地学习React进阶技能,并通过实践项目巩固所学知识。祝你学习顺利!</p> <p>你可以将上述Markdown内容复制到任何支持Markdown的编辑器或平台中,以便于查看和使用。</p>
相关文章
|
2月前
|
前端开发 JavaScript
React学习之——条件渲染
【10月更文挑战第16天】React 中没有像Vue中v-if这种指令。React 中的条件渲染和 JavaScript 中的一样,使用 JavaScript 运算符 if 或者条件运算符去创建元素来表现当前的状态,然后让 React 根据它们来更新 UI。
|
3月前
|
前端开发 JavaScript
学习react基础(3)_setState、state、jsx、使用ref的几种形式
本文探讨了React中this.setState和this.state的区别,以及React的核心概念,包括核心库的使用、JSX语法、类与函数组件的区别、事件处理和ref的使用。
75 3
学习react基础(3)_setState、state、jsx、使用ref的几种形式
|
3月前
|
前端开发 JavaScript
react学习(13)props
react学习(13)props
|
3月前
|
前端开发
学习react基础(2)_props、state和style的使用
本文介绍了React中组件间数据传递的方式,包括props和state的使用,以及如何在React组件中使用style样式。
34 0
|
1月前
|
前端开发 JavaScript 安全
学习如何为 React 组件编写测试:
学习如何为 React 组件编写测试:
37 2
|
2月前
|
资源调度 前端开发 JavaScript
React进阶学习
React进阶学习
15 1
|
3月前
|
XML JavaScript 前端开发
学习react基础(1)_虚拟dom、diff算法、函数和class创建组件
本文介绍了React的核心概念,包括虚拟DOM、Diff算法以及如何通过函数和类创建React组件。
31 3
|
3月前
|
前端开发
react学习(17)回调形式的ref
react学习(17)回调形式的ref
|
3月前
|
前端开发
react学习(15)函数式组件中使用props
react学习(15)函数式组件中使用props
|
3月前
|
前端开发
react学习(22)高阶函数和函数柯里化
react学习(22)高阶函数和函数柯里化