结合使用React和其他技术的七种方法 _React

译者 | 布加迪
审校 | 重楼
React是一种知名的JAVAScript库，可以用它来为用途广泛的Web应用程序开发UI 。React有很强的适应性，可以将它与其他技术结合起来，构建更强大、更有效的应用程序。

文章插图
不妨了解如何将React与各种技术结合起来，以便集诸多优点于一体。
1. React + ReduxRedux是一个与React结合使用的状态管理库。Redux便于集中式应用程序状态管理。当构建有许多状态的复杂应用程序时，React和Redux可以很好地协同工作。
下面这个示例说明了如何结合使用React和Redux：

import React from 'react';import { createStore } from 'redux';import { Provider } from 'react-redux';const initialState = { count: 0 };function reducer(state = initialState, action) { switch (action.type) { case 'INCREMENT': return { count: state.count + 1 }; case 'DECREMENT': return { count: state.count - 1 };default: return state;}}const import React from 'react';import { useQuery, gql } from '@apollo/client';const GET_USERS = gql`query GetUsers {users {idname}};function Users() {const { loading, error, data } = useQuery(GET_USERS);if (loading) return <p>Loading...</p>;if (error) return <p>Error :(</p>;return (store = createStore(reducer);function Counter() {const count = useSelector(state => state.count);const dispatch = useDispatch();return (<div><p>Count: {count}</p><button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button><button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button></div>);}function App() {return (<Provider store={store}><Counter /></Provider>);}export default App;

该示例创建了一个初始状态为0的Redux存储。然后，reducer函数处理INCREMENT操作和DECREMENT操作。代码使用useSelector和useDispatch钩子来获取进行中的计数，并单独分派活动。
最后，为了使整个应用程序可以访问该存储，将计数器组件包装在提供者组件中。
2.结合Next.js用于服务器端渲染Next.js是一个开发框架，通过向客户端传输html和使用React组件的服务器端渲染，以优化网站速度和搜索引擎优化（seo）策略。
其强大的工具集可以与React协同工作，提供出色的性能和高搜索引擎排名。

// pages/index.jsimport React from 'react';function Home() { return ( <div> <h1>Hello, World!</h1> <p>This is a server-rendered React component.</p> </div> );}export default Home;

在该示例中，您描述了一个名为Home的React组件。Next.js在服务器上渲染时，会生成一个含有该组件内容的静态HTML页面。当页面收到来自客户端的访问时，它会将HTML发送到客户端并hydrate组件，使其能够作为动态React组件来运行。
3.结合GraphQL以获取数据GraphQL是一种API查询语言，它提供一种熟练、强大且适应性强的REST替代方案。借助GraphQL，您可以更快地获取数据，更快地更新用户界面。
这个示例说明了结合使用React和GraphQL的方法：

import React from 'react';import { useQuery, gql } from '@apollo/client';const GET_USERS = gql`query GetUsers {users {idname}};function Users() {const { loading, error, data } = useQuery(GET_USERS);if (loading) return <p>Loading...</p>;if (error) return <p>Error :(</p>;return (<ul>{data.users.map(user => (<li key={user.id}>{user.name}</li>))}</ul>);}function App() {return (<div><h1>Users</h1><Users /></div>);}export default App;

该示例从@apollo/client库调用useQuery函数，以便从GraphQL编程接口获取客户端的概要。用户列表随后显示在UI中。
4.结合css-in-JS用于样式CSS-in-JS是一种基于JavaScript的React组件样式化方法。它简化了管理复杂样式表的工作，并允许您以模块化和基于组件的方式编写样式。
下面这个示例说明了如何结合使用React和CSS-in-JS：

import React from 'react';import styled from 'styled-components';const Button = styled.button` background-color: #007bff; color: #fff; padding: 10px 20px; border-radius: 5px; font-size: 16px; cursor: pointer; &:hover { background-color: #0069d9; };function App() { return ( <div> <Button>Click me!</Button> </div> );}export default App;

这个例子使用styled函数创建了样式按钮组件。它定义了按钮的体验色调、文本色调、缓冲、线扫描、文本尺寸和光标。
还定义了当用户将鼠标悬停在按钮上时改变背景颜色的悬停状态。最后使用React组件渲染按钮。