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

点击参加51CTO网站内容调查问卷

译者 | 布加迪

审校 | 重楼

React是一种知名的JavaScript库，可以用它来为用途广泛的Web应用程序开发UI。React有很强的适应性，可以将它与其他技术结合起来，构建更强大、更有效的应用程序。

不妨了解如何将React与各种技术结合起来，以便集诸多优点于一体。

1. React + Redux

Redux是一个与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 {
id
name
}
}
;
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.js
import 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 {
id
name
}
}
;
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组件渲染按钮。

5. 结合D3用于数据可视化

D3是一个数据操作和可视化JavaScript库。您可以使用React实现强大的交互式数据可视化。下面这个示例说明了如何结合使用React和D3：

import React, { useRef, useEffect } from 'react';
import * as d3 from 'd3';
function BarChart({ data }) {
 const ref = useRef();
 useEffect(() => {
 const svg = d3.select(ref.current);
 const width = svg.attr('width');
 const height = svg.attr('height');
 const x = d3.scaleBand()
 .domain(data.map((d) => d.label))
 .range([0, width])
 .padding(0.5);
 const y = d3.scaleLinear()
 .domain([0, d3.max(data, (d) => d.value)])
 .range([height, 0]);
 svg.selectAll('rect')
 .data(data)
 .enter()
 .append('rect')
 .attr('x', (d) => x(d.label))
 .attr('y', (d) => y(d.value))
 .attr('width', x.bandwidth())
 .attr('height', (d) => height - y(d.value))
 .attr('fill', '#007bff');
 }, [data]);
 return (
 <svg ref={ref} width={400} height={400}>
 {/* axes go here */}
 </svg>
 );
}
export default BarChart;

这段代码定义了BarChart组件，该组件接受前面代码片段中的数据道具。它调用useRef钩子来引用SVG组件，该组件将使用它来绘制轮廓。

之后，它渲染图表的条形，并使用useEffect()钩子定义刻度，该钩子将数据的值映射到屏幕坐标。

6. 结合WebSockets以添加实时功能

实现WebSockets建立了一个完全可操作的双向通道，使客户端和服务器之间能够持续联系。它们使React能够为Web应用程序持续添加实用的组件，比如讨论板、实时更新和警告。

可以通过如下方式结合使用React和WebSockets：

import React, { useState, useEffect } from 'react';
import io from 'socket.io-client';
function ChatRoom() {
 const [messages, setMessages] = useState([]);
 const [inputValue, setInputValue] = useState('');
 const socket = io('http://localhost:3001');
 useEffect(() => {
 socket.on('message', (message) => {
 setMessages([...messages, message]);
 });
 }, [messages, socket]);
 const handleSubmit = (e) => {
 e.preventDefault();
 socket.emit('message', inputValue);
 setInputValue('');
 };
 return (
 <div>
 <ul>
 {messages.map((message, i) => (
 <li key={i}>{message}</li>
 ))}
 </ul>
 <form onSubmit={handleSubmit}>
 <input
 type="text"
 value={inputValue}
 onChange={(e) => setInputValue(e.target.value)}
 />
 <button type="submit">Send</button>
 </form>
 </div>
 );
}
export default ChatRoom;

在该示例中，您定义了使用socket.io-client库的ChatRoom组件，以连接到WebSocket服务器。您可以使用useState钩子来处理消息概要。

一收到新消息，useEffect钩子注册侦听器，以触发对消息列表进行消息事件更新的操作。若要清除和发送事件消息的输入值，用户可以使用handlessubmit函数。

随后，带有输入字段和按钮的表单以及更新后的消息列表都将显示在屏幕上。

至于每个表单提交，调用handlessubmit函数是不可避免的。为了将消息传递到服务器，该方法使用套接字。

7. 结合React Native用于移动开发

React Local是一个使用React构建本地通用应用程序的系统，可用于推广面向iOS和Android平台的可移植应用程序。

结合使用React Native和React，您可以在移动和Web平台上使用React的基于组件的设计和可重用代码。这缩短了手机应用程序的开发周期和上市时间。React Native是一种流行的框架，用于开发可充分利用React库的原生移动应用程序。

引入重要的编程框架和库对分开处理iOS和安卓的设计师而言至关重要，比如Node.js、Response Local CLI、Xcode或Android Studio等编程框架和库。最后，简单的React Native组件使开发人员能够为iOS和安卓平台创建稳健可靠且功能丰富的移动应用程序。

将React与其他技术结合起来

React是一种大受欢迎的高效库，用于构建在线应用程序。React是创建用户界面的上佳选择，但它也可以与其他技术结合起来以增强功能。

通过结合React与上述技术，开发人员就能构建更精巧、更先进的应用程序，从而提供更出色的用户体验。React及其众多工具和库组成的生态系统可以满足为构建基础网站或复杂的Web应用程序各方面的需要。

原文标题：Beyond React: 7 Ways of Integrating React With Other Technologies，作者：Robert Pearce