點(diǎn)擊參加網(wǎng)站內(nèi)容調(diào)查問(wèn)卷

譯者 | 布加迪

審校 | 重樓

React是一種知名的JavaScript庫(kù)，可以用它來(lái)為用途廣泛的Web應(yīng)用程序開(kāi)發(fā)UI。React有很強(qiáng)的適應(yīng)性，可以將它與其他技術(shù)結(jié)合起來(lái)，構(gòu)建更強(qiáng)大、更有效的應(yīng)用程序。

不妨了解如何將React與各種技術(shù)結(jié)合起來(lái)，以便集諸多優(yōu)點(diǎn)于一體。

1. React + Redux

Redux是一個(gè)與React結(jié)合使用的狀態(tài)管理庫(kù)。Redux便于集中式應(yīng)用程序狀態(tài)管理。當(dāng)構(gòu)建有許多狀態(tài)的復(fù)雜應(yīng)用程序時(shí)，React和Redux可以很好地協(xié)同工作。

下面這個(gè)示例說(shuō)明了如何結(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 
Loading...
;
if (error) return 
Error :(
;
return (
store = createStore(reducer);
function Counter() {
const count = useSelector(state => state.count);
const dispatch = useDispatch();
return (

Count: {count}
 dispatch({ type: 'INCREMENT' })}>+
 dispatch({ type: 'DECREMENT' })}>-

);
}
function App() {
return (



);
}
export default App;

該示例創(chuàng)建了一個(gè)初始狀態(tài)為0的Redux存儲(chǔ)。然后，reducer函數(shù)處理INCREMENT操作和DECREMENT操作。代碼使用useSelector和useDispatch鉤子來(lái)獲取進(jìn)行中的計(jì)數(shù)，并單獨(dú)分派活動(dòng)。

最后，為了使整個(gè)應(yīng)用程序可以訪問(wèn)該存儲(chǔ)，將計(jì)數(shù)器組件包裝在提供者組件中。

2.結(jié)合Next.js用于服務(wù)器端渲染

Next.js是一個(gè)開(kāi)發(fā)框架，通過(guò)向客戶端傳輸HTML和使用React組件的服務(wù)器端渲染，以優(yōu)化網(wǎng)站速度和搜索引擎優(yōu)化（SEO）策略。

其強(qiáng)大的工具集可以與React協(xié)同工作，提供出色的性能和高搜索引擎排名。

// pages/index.js
import React from 'react';
function Home() {
 return (
 

 
Hello, World!
 
This is a server-rendered React component.
 
 );
}
export default Home;

在該示例中，您描述了一個(gè)名為Home的React組件。Next.js在服務(wù)器上渲染時(shí)，會(huì)生成一個(gè)含有該組件內(nèi)容的靜態(tài)HTML頁(yè)面。當(dāng)頁(yè)面收到來(lái)自客戶端的訪問(wèn)時(shí)，它會(huì)將HTML發(fā)送到客戶端并hydrate組件，使其能夠作為動(dòng)態(tài)React組件來(lái)運(yùn)行。

3.結(jié)合GraphQL以獲取數(shù)據(jù)

GraphQL是一種API查詢語(yǔ)言，它提供一種熟練、強(qiáng)大且適應(yīng)性強(qiáng)的REST替代方案。借助GraphQL，您可以更快地獲取數(shù)據(jù)，更快地更新用戶界面。

這個(gè)示例說(shuō)明了結(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 
Loading...
;
if (error) return 
Error :(
;
return (

{data.users.map(user => (
{user.name}
))}

);
}
function App() {
return (

Users


);
}
export default App;

該示例從@apollo/client庫(kù)調(diào)用useQuery函數(shù)，以便從GraphQL編程接口獲取客戶端的概要。用戶列表隨后顯示在UI中。

4.結(jié)合CSS-in-JS用于樣式

CSS-in-JS是一種基于Javascript的React組件樣式化方法。它簡(jiǎn)化了管理復(fù)雜樣式表的工作，并允許您以模塊化和基于組件的方式編寫(xiě)樣式。

下面這個(gè)示例說(shuō)明了如何結(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 (
 

 Click me!
 
 );
}
export default App;

這個(gè)例子使用styled函數(shù)創(chuàng)建了樣式按鈕組件。它定義了按鈕的體驗(yàn)色調(diào)、文本色調(diào)、緩沖、線掃描、文本尺寸和光標(biāo)。

還定義了當(dāng)用戶將鼠標(biāo)懸停在按鈕上時(shí)改變背景顏色的懸停狀態(tài)。最后使用React組件渲染按鈕。

5. 結(jié)合D3用于數(shù)據(jù)可視化

D3是一個(gè)數(shù)據(jù)操作和可視化JavaScript庫(kù)。您可以使用React實(shí)現(xiàn)強(qiáng)大的交互式數(shù)據(jù)可視化。下面這個(gè)示例說(shuō)明了如何結(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 (
 
 );
}
export default BarChart;

這段代碼定義了BarChart組件，該組件接受前面代碼片段中的數(shù)據(jù)道具。它調(diào)用useRef鉤子來(lái)引用SVG組件，該組件將使用它來(lái)繪制輪廓。

之后，它渲染圖表的條形，并使用useEffect()鉤子定義刻度，該鉤子將數(shù)據(jù)的值映射到屏幕坐標(biāo)。

6. 結(jié)合WebSockets以添加實(shí)時(shí)功能

實(shí)現(xiàn)WebSockets建立了一個(gè)完全可操作的雙向通道，使客戶端和服務(wù)器之間能夠持續(xù)聯(lián)系。它們使React能夠?yàn)閃eb應(yīng)用程序持續(xù)添加實(shí)用的組件，比如討論板、實(shí)時(shí)更新和警告。

可以通過(guò)如下方式結(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 (
 

 

 {messages.map((message, i) => (
 
{message}
 ))}
 
 

  setInputValue(e.target.value)}
 />
 Send
 
 
 );
}
export default ChatRoom;

在該示例中，您定義了使用socket.io-client庫(kù)的ChatRoom組件，以連接到WebSocket服務(wù)器。您可以使用useState鉤子來(lái)處理消息概要。

一收到新消息，useEffect鉤子注冊(cè)偵聽(tīng)器，以觸發(fā)對(duì)消息列表進(jìn)行消息事件更新的操作。若要清除和發(fā)送事件消息的輸入值，用戶可以使用handlessubmit函數(shù)。

隨后，帶有輸入字段和按鈕的表單以及更新后的消息列表都將顯示在屏幕上。

至于每個(gè)表單提交，調(diào)用handlessubmit函數(shù)是不可避免的。為了將消息傳遞到服務(wù)器，該方法使用套接字。

7. 結(jié)合React Native用于移動(dòng)開(kāi)發(fā)

React Local是一個(gè)使用React構(gòu)建本地通用應(yīng)用程序的系統(tǒng)，可用于推廣面向iOS和Android平臺(tái)的可移植應(yīng)用程序。

結(jié)合使用React Native和React，您可以在移動(dòng)和Web平臺(tái)上使用React的基于組件的設(shè)計(jì)和可重用代碼。這縮短了手機(jī)應(yīng)用程序的開(kāi)發(fā)周期和上市時(shí)間。React Native是一種流行的框架，用于開(kāi)發(fā)可充分利用React庫(kù)的原生移動(dòng)應(yīng)用程序。

引入重要的編程框架和庫(kù)對(duì)分開(kāi)處理iOS和安卓的設(shè)計(jì)師而言至關(guān)重要，比如Node.js、Response Local CLI、Xcode或Android Studio等編程框架和庫(kù)。最后，簡(jiǎn)單的React Native組件使開(kāi)發(fā)人員能夠?yàn)閕OS和安卓平臺(tái)創(chuàng)建穩(wěn)健可靠且功能豐富的移動(dòng)應(yīng)用程序。

將React與其他技術(shù)結(jié)合起來(lái)

React是一種大受歡迎的高效庫(kù)，用于構(gòu)建在線應(yīng)用程序。React是創(chuàng)建用戶界面的上佳選擇，但它也可以與其他技術(shù)結(jié)合起來(lái)以增強(qiáng)功能。

通過(guò)結(jié)合React與上述技術(shù)，開(kāi)發(fā)人員就能構(gòu)建更精巧、更先進(jìn)的應(yīng)用程序，從而提供更出色的用戶體驗(yàn)。React及其眾多工具和庫(kù)組成的生態(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

網(wǎng)站名稱：結(jié)合使用React和其他技術(shù)的七種方法
文章起源：http://www.5511xx.com/article/ccidoph.html