結合使用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
