跳到主要内容

3 篇博文 含有标签「react」

查看所有标签

目标:React常用Hook及概念练习

在这个练习中,我们将通过一步步的实践,熟悉React中常用的Hook和一些重要的概念。

第一步,useState Hook

使用useState Hook来实现组件状态的管理。

import React, { useState } from 'react';

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

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

export default Counter;

第二步,useEffect Hook

使用useEffect Hook来处理副作用,例如数据获取、订阅等。

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

const DataFetching = () => {
const [data, setData] = useState([]);

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

return (
<div>
<h2>Data Fetching</h2>
<ul>
{data.map((item) => (
<li key={item.id}>{item.title}</li>
))}
</ul>
</div>
);
};

export default DataFetching;

第三步,useContext Hook

使用useContext Hook来访问React的上下文。

import React, { useContext } from 'react';

const ThemeContext = React.createContext();

const ThemedComponent = () => {
const theme = useContext(ThemeContext);

return (
<div style={{ color: theme === 'dark' ? 'white' : 'black' }}>
Themed Component
</div>
);
};

export const App = () => {
return (
<ThemeContext.Provider value="dark">
<ThemedComponent />
</ThemeContext.Provider>
);
};

第四步,useReducer Hook

使用useReducer Hook来管理复杂的状态逻辑。

import React, { useReducer } from 'react';

const initialState = { count: 0 };

const reducer = (state, action) => {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
return state;
}
};

const CounterWithReducer = () => {
const [state, dispatch] = useReducer(reducer, initialState);

return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
<button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
</div>
);
};

export default CounterWithReducer;

第五步,自定义Hook

创建自定义Hook来提取和重用组件逻辑。

import { useState, useEffect } from 'react';

const useDataFetching = (url) => {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);

useEffect(() => {
setLoading(true);
fetch(url)
.then((response) => response.json())
.then((data) => {
setData(data);
setLoading(false);
});
}, [url]);

return { data, loading };
};

export default useDataFetching;

总结

通过这个React常用Hook及概念的练习,我们熟悉了useStateuseEffectuseContextuseReducer等React Hook,以及自定义Hook的使用。这些Hook能够使我们更轻松地管理组件的状态和副作用,提高代码的可维护性和可重用性。

希望这个练习能够帮助你更深入地理解和应用React中的Hook。

练习react阅读需 2 分钟

目标:写个列表+表单

在这个练习中,我们将通过一步步的实践,使用React和Ant Design,实现一个包含增删改查功能的列表和表单。

在这个实践中,我们将创建一个React组件,包含一个用于展示数据的列表,以及一个用于操作数据的表单。通过这个图,我们可以清晰地了解我们要构建的最终目标。

第一步,安装UI库

首先,我们需要安装Ant Design。执行以下命令进行安装:

npm install antd

然后,在项目中引入所需的样式和组件。

第二步,写一个列表

创建一个新的React组件,用于展示列表。在这个组件中,我们将使用Ant Design的Table组件。

import React from 'react';
import { Table, Button } from 'antd';

const MyList = ({ data, onDelete, onEdit }) => {
const columns = [
// Define your columns based on your data structure
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Age', dataIndex: 'age', key: 'age' },
// Add more columns as needed
{
title: 'Actions',
key: 'actions',
render: (text, record) => (
<span>
<Button onClick={() => onEdit(record)}>Edit</Button>
<Button onClick={() => onDelete(record.key)} style={{ marginLeft: 8 }} danger>
Delete
</Button>
</span>
),
},
];

return <Table dataSource={data} columns={columns} />;
};

export default MyList;

第三步,写一个表单

创建一个新的React组件,用于展示表单。在这个组件中,我们将使用Ant Design的FormInput组件。

import React from 'react';
import { Form, Input, Button } from 'antd';

const MyForm = ({ onSubmit, onCancel, form }) => {
const onFinish = (values) => {
onSubmit(values);
form.resetFields();
};

const onFinishFailed = (errorInfo) => {
console.log('Failed:', errorInfo);
};

return (
<Form
form={form}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
layout="vertical"
>
<Form.Item label="Name" name="name" rules={[{ required: true, message: 'Please input the name!' }]}>
<Input />
</Form.Item>
<Form.Item label="Age" name="age" rules={[{ required: true, message: 'Please input the age!' }]}>
<Input />
</Form.Item>

{/* Add more form fields as needed */}

{/* Submit and Cancel buttons */}
<Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
<Button type="default" onClick={onCancel} style={{ marginLeft: 8 }}>
Cancel
</Button>
</Form.Item>
</Form>
);
};

export default MyForm;

第四步,对接接口

在实际项目中,你需要将列表和表单与后端接口进行对接。使用fetchaxios等工具来发起请求,并在成功后更新列表数据。

总结

通过这个React + Ant Design练习,我们实现了一个具有增删改查功能的列表和表单。React的组件化和Ant Design的组件库让前端开发更加高效。在实际项目中,你可以根据需要进一步扩展和优化这个基础组件,满足复杂的前端需求。

练习react阅读需 3 分钟

目标:写个页面

在这个指南中,我们将一步步地进行React全栈开发,目标是创建一个简单的页面。我们将探讨环境配置、页面编写、页面间的导航和参数传递、组件间的通信以及接口请求等关键步骤。

第一步,配置环境

在进行React全栈开发之前,首先需要配置开发环境。我们将使用React及其生态中的一些关键库,例如react-domnest。以下是配置环境的基本步骤:

代码示例:package.json

{
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"nest": "^x.x.x"
// 其他依赖
},
"scripts": {
"start": "your-start-script",
// 其他脚本
}
}

代码示例:babel.config.js

module.exports = {
presets: ['@babel/preset-env', '@babel/preset-react'],
};

第二步,写个页面

一旦环境配置完成,我们可以开始编写我们的第一个页面。这将涉及到创建React组件以及使用一些基本的UI元素。

代码示例:src/pages/Home.js

import React from 'react';

const Home = () => {
return (
<div>
<h1>Welcome to our React Full-Stack Blog</h1>
<p>This is the home page of our application.</p>
</div>
);
};

export default Home;

第三步,页面跳转传参

为了使我们的应用更加交互,我们将探讨页面之间的导航和参数传递。

1. 两种路由导航写法

在React中,有多种方式可以实现路由导航。我们将研究两种常用的方法。

代码示例:使用React Router进行导航
npm install react-router-dom
import { BrowserRouter as Router, Link, Route } from 'react-router-dom';

const App = () => {
return (
<Router>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
</Router>
);
};
代码示例:使用history进行导航
import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

const navigateTo = (url) => {
history.push(url);
};

// 使用
navigateTo('/about');

2. 三种路由参数获取方法

在React中,获取路由参数有多种方式,我们将讨论其中的三种方法。

代码示例:使用useParams Hook
import { useParams } from 'react-router-dom';

const BlogPost = () => {
const { postId } = useParams();

return <p>Displaying blog post #{postId}</p>;
};
代码示例:使用withRouter HOC
import { withRouter } from 'react-router-dom';

const BlogPost = (props) => {
const { match } = props;
const postId = match.params.postId;

return <p>Displaying blog post #{postId}</p>;
};

export default withRouter(BlogPost);
代码示例:使用useLocation Hook
import { useLocation } from 'react-router-dom';

const BlogPost = () => {
const location = useLocation();
const postId = location.pathname.split('/').pop();

return <p>Displaying blog post #{postId}</p>;
};

第四步,组件间通信

在React开发中,组件间通信是一个关键的主题。我们将讨论父子组件通信、兄弟组件通信以及爷孙组件通信(跨组件通信)。

1. 父子组件通信

在React中,通过props可以实现父子组件之间的通信。

代码示例:父组件传递数据给子组件
// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
const data = 'Data from parent';

return <ChildComponent data={data} />;
};

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

const ChildComponent = (props) => {
const { data } = props;

return <p>Data received from parent: {data}</p>;
};

export default ChildComponent;

2. 兄弟组件通信

为了实现兄弟组件之间的通信,可以通过共享状态或者使用父组件作为中介。

代码示例:使用父组件作为中介
// ParentComponent.js
import React, { useState } from 'react';
import BrotherComponentA from './BrotherComponentA';
import BrotherComponentB from './BrotherComponentB';

const ParentComponent = () => {
const [sharedData, setSharedData] = useState('');

return (
<>
<BrotherComponentA setSharedData={setSharedData} />
<BrotherComponentB sharedData={sharedData} />
</>
);
};

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

const BrotherComponentA = (props) => {
const { setSharedData } = props;

const handleChange = (e) => {
setSharedData(e.target.value);
};

return <input type="text" onChange={handleChange} />;
};

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

const BrotherComponentB = (props) => {
const { sharedData } = props;

return <p>Data shared between brothers: {sharedData}</p>;
};

export { BrotherComponentA, BrotherComponentB };

3. 爷孙组件通信(跨组件通信)

对于爷孙组件之间的通信,可以使用Context API或者第三方状态管理工具,如Redux。

第五步,接口请求

在现代的Web应用中,与后端进行数据交互是不可避免的。我们将讨论如何在React

中进行接口请求。

代码示例:使用fetch进行简单的接口请求

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

const ApiExample = () => {
const [data, setData] = useState([]);

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

return (
<div>
<h2>API Example</h2>
<ul>
{data.map((item) => (
<li key={item.id}>{item.title}</li>
))}
</ul>
</div>
);
};

export default ApiExample;

总结

在这篇React全栈开发实践指南中,我们覆盖了从环境配置到页面编写、导航、组件通信以及接口请求的各个方面。通过这些实例,希望读者能够建立起对React全栈开发的整体认识,并能够在实际项目中灵活运用这些技术。

以上示例代码仅为演示目的,实际项目中可能需要根据具体情况进行调整和优化。希望这篇指南对你在React全栈开发中的学习和实践有所帮助。

练习react阅读需 5 分钟