結(jié)合使用React和其他技術(shù)的七種方法
譯文點擊參加51CTO網(wǎng)站內(nèi)容調(diào)查問卷
譯者 | 布加迪
審校 | 重樓
React是一種知名的JavaScript庫，可以用它來為用途廣泛的Web應(yīng)用程序開發(fā)UI。React有很強(qiáng)的適應(yīng)性，可以將它與其他技術(shù)結(jié)合起來，構(gòu)建更強(qiáng)大、更有效的應(yīng)用程序。
不妨了解如何將React與各種技術(shù)結(jié)合起來，以便集諸多優(yōu)點于一體。
1. React + Redux
Redux是一個與React結(jié)合使用的狀態(tài)管理庫。Redux便于集中式應(yīng)用程序狀態(tài)管理。當(dāng)構(gòu)建有許多狀態(tài)的復(fù)雜應(yīng)用程序時，React和Redux可以很好地協(xié)同工作。
下面這個示例說明了如何結(jié)合使用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;該示例創(chuàng)建了一個初始狀態(tài)為0的Redux存儲。然后，reducer函數(shù)處理INCREMENT操作和DECREMENT操作。代碼使用useSelector和useDispatch鉤子來獲取進(jìn)行中的計數(shù)，并單獨(dú)分派活動。
最后，為了使整個應(yīng)用程序可以訪問該存儲，將計數(shù)器組件包裝在提供者組件中。
2.結(jié)合Next.js用于服務(wù)器端渲染
Next.js是一個開發(fā)框架，通過向客戶端傳輸HTML和使用React組件的服務(wù)器端渲染，以優(yōu)化網(wǎng)站速度和搜索引擎優(yōu)化（SEO）策略。
其強(qiáng)大的工具集可以與React協(xié)同工作，提供出色的性能和高搜索引擎排名。
// 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在服務(wù)器上渲染時，會生成一個含有該組件內(nèi)容的靜態(tài)HTML頁面。當(dāng)頁面收到來自客戶端的訪問時，它會將HTML發(fā)送到客戶端并hydrate組件，使其能夠作為動態(tài)React組件來運(yùn)行。
3.結(jié)合GraphQL以獲取數(shù)據(jù)
GraphQL是一種API查詢語言，它提供一種熟練、強(qiáng)大且適應(yīng)性強(qiáng)的REST替代方案。借助GraphQL，您可以更快地獲取數(shù)據(jù)，更快地更新用戶界面。
這個示例說明了結(jié)合使用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庫調(diào)用useQuery函數(shù)，以便從GraphQL編程接口獲取客戶端的概要。用戶列表隨后顯示在UI中。
4.結(jié)合CSS-in-JS用于樣式
CSS-in-JS是一種基于Javascript的React組件樣式化方法。它簡化了管理復(fù)雜樣式表的工作，并允許您以模塊化和基于組件的方式編寫樣式。
下面這個示例說明了如何結(jié)合使用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函數(shù)創(chuàng)建了樣式按鈕組件。它定義了按鈕的體驗色調(diào)、文本色調(diào)、緩沖、線掃描、文本尺寸和光標(biāo)。
還定義了當(dāng)用戶將鼠標(biāo)懸停在按鈕上時改變背景顏色的懸停狀態(tài)。最后使用React組件渲染按鈕。
5. 結(jié)合D3用于數(shù)據(jù)可視化
D3是一個數(shù)據(jù)操作和可視化JavaScript庫。您可以使用React實現(xiàn)強(qiáng)大的交互式數(shù)據(jù)可視化。下面這個示例說明了如何結(jié)合使用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組件，該組件接受前面代碼片段中的數(shù)據(jù)道具。它調(diào)用useRef鉤子來引用SVG組件，該組件將使用它來繪制輪廓。
之后，它渲染圖表的條形，并使用useEffect()鉤子定義刻度，該鉤子將數(shù)據(jù)的值映射到屏幕坐標(biāo)。
6. 結(jié)合WebSockets以添加實時功能
實現(xiàn)WebSockets建立了一個完全可操作的雙向通道，使客戶端和服務(wù)器之間能夠持續(xù)聯(lián)系。它們使React能夠為Web應(yīng)用程序持續(xù)添加實用的組件，比如討論板、實時更新和警告。
可以通過如下方式結(jié)合使用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服務(wù)器。您可以使用useState鉤子來處理消息概要。
一收到新消息，useEffect鉤子注冊偵聽器，以觸發(fā)對消息列表進(jìn)行消息事件更新的操作。若要清除和發(fā)送事件消息的輸入值，用戶可以使用handlessubmit函數(shù)。
隨后，帶有輸入字段和按鈕的表單以及更新后的消息列表都將顯示在屏幕上。
至于每個表單提交，調(diào)用handlessubmit函數(shù)是不可避免的。為了將消息傳遞到服務(wù)器，該方法使用套接字。
7. 結(jié)合React Native用于移動開發(fā)
React Local是一個使用React構(gòu)建本地通用應(yīng)用程序的系統(tǒng)，可用于推廣面向iOS和Android平臺的可移植應(yīng)用程序。
結(jié)合使用React Native和React，您可以在移動和Web平臺上使用React的基于組件的設(shè)計和可重用代碼。這縮短了手機(jī)應(yīng)用程序的開發(fā)周期和上市時間。React Native是一種流行的框架，用于開發(fā)可充分利用React庫的原生移動應(yīng)用程序。
引入重要的編程框架和庫對分開處理iOS和安卓的設(shè)計師而言至關(guān)重要，比如Node.js、Response Local CLI、Xcode或Android Studio等編程框架和庫。最后，簡單的React Native組件使開發(fā)人員能夠為iOS和安卓平臺創(chuàng)建穩(wěn)健可靠且功能豐富的移動應(yīng)用程序。
將React與其他技術(shù)結(jié)合起來
React是一種大受歡迎的高效庫，用于構(gòu)建在線應(yīng)用程序。React是創(chuàng)建用戶界面的上佳選擇，但它也可以與其他技術(shù)結(jié)合起來以增強(qiáng)功能。
通過結(jié)合React與上述技術(shù)，開發(fā)人員就能構(gòu)建更精巧、更先進(jìn)的應(yīng)用程序，從而提供更出色的用戶體驗。React及其眾多工具和庫組成的生態(tài)系統(tǒng)可以滿足為構(gòu)建基礎(chǔ)網(wǎng)站或復(fù)雜的Web應(yīng)用程序各方面的需要。
原文標(biāo)題：Beyond React: 7 Ways of Integrating React With Other Technologies，作者：Robert Pearce
