整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
1、Angular
大家眼里比較牛的框架，甚至有人說三大框架中只有它能稱得上一個完整的框架，因為它包含的東西比較完善，包含模板，數據雙向綁定，路由，模塊化，服務，過濾器，依賴注入等所有功能。對于剛開始學習使用框架的小伙伴們，可以推薦這個框架，學會之后簡直能顛覆之前你對前端開發的認知。使用 TypeScript能夠提高代碼可維護性，有利于后期重構。雙向數據流很方便，但是等業務復雜之后，你可能就搞不清楚數據流了。還有令人不開心的臟值檢查，以及directive的封裝并沒有解決視圖與數據關系完全分離，有時候還要用$digist強制觸發檢測。
2、React（也是接下來要講的）
這個框架本身比較容易理解，它的結構很清晰，就是由十幾個API組成，然后異步渲染，我們只需要處理好接口和維護就好了，但是很多人反映上手還是有一定的的難度的。React是單向數據流，代碼寫起來會較雙向數據流多一些，但是同樣的排查問題時思路清晰很多。
3、Vue
號稱是最簡單，最容易上手的框架，同時也是行內的大趨勢，還可以用來開發最火的小程序。畢竟用這神器，代碼碼得飛快，項目也能快速上線。同時他也是雙向數據流。有些人認為Vue是Angular和React的結合，既有Angular的模板語法也有React的組件化體系。
React 起源于 Facebook 內部項目，用來架設 Instagram 網站，并于 2013 年 5 月開源。React 擁有較高的性能，代碼邏輯非常簡單，越來越多的人已開始關注和使用它。
"scripts": {
"start": "react-scripts start", // 開始運行項目
"build": "react-scripts build", // 生成環境構建
"test": "react-scripts test", // 測試用例
"eject": "react-scripts eject" // 自定義 webpack 配置
},
"dependencies": {
...
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.3"
...
},
4、React JSX 語法
const element = <div>這是一個元素</div>;
ReactDOM.render(element, document.getElementById("app"));
const styleName = { marginLeft: 10 };
const element = <div style={styleName}>測試應用</div>;
ReactDOM.render(element, document.getElementById("app"));
const element = (
<div>
<p
onClick={() => {
console.log("點擊事件");
} }
>
事件定義
</p>
</div>
);
ReactDOM.render(element, document.getElementById("app"));
const element = <div>{1 + 1}</div>;
ReactDOM.render(element, document.getElementById("app"));
const element = <h1>{index == 1 ? "顯示" : "不顯示"}</h1>;
ReactDOM.render(element, document.getElementById("app"));
class ClassComponent extends React.Component {
render() {
return <div>是一個 Class 組件</div>;
}
}
const FunctionComponent = () => <div>是一個 Function 組件</div>;
class ClassComponent extends React.Component {
state = {
count: 0,
};
handleAdd = () => {
const { count } = this.state;
this.setState({ count: count + 1 });
};
handleReduce = () => {
const { count } = this.state;
this.setState({ count: count - 1 });
};
render() {
const { count } = this.state;
return (
<div>
<p>Class 組件</p>
<p>點前計數 {count}</p>
<button onClick={this.handleAdd}>加</button>
<button onClick={this.handleReduce}>減</button>
</div>
);
}
}
import React, { useState } from "react";
const FunctionComponent = () => {
const [count, setCount] = useState(0);
const handleAdd = () => {
setCount(count + 1);
};
const handleReduce = () => {
setCount(count - 1);
};
return (
<div>
<p>Function 組件</p>
<p>點前計數 {count}</p>
<button onClick={handleAdd}>加</button>
<button onClick={handleReduce}>減</button>
</div>
);
};
const App = () => {
return (
<div className="App">
<ClassComponent title="Class Props Title" />
<FunctionComponent title="Function Props Title" />
</div>
);
};
export default App;
// 組件被掛載
componentDidMount() {}
// 發生異常
componentDidCatch() {}
// 組件重新渲染 組件狀態 || 屬性改變
componentDidUpdate() {}
// 判斷組件是否應該重新渲染，默認 true
shouldComponentUpdate(nextProps, nextState) {}
// 組件將被卸載
componentWillUnmount() {}
useEffect(() => {
// did mount
// ajax request
return () => {
// un mount
// clear resource
};
// 當 value 發生變化，重新觸發
}, [value]);
能夠正確使用 React 生命周期函數和 state & props，事件定義。可以解決大部分 React 項目開發。
好啦，這次就為大家分享這些了，更多前端學習資源，歡迎關注我們~
自：coderwhy
前面說過，整個前端已經是組件化的天下，而CSS的設計就不是為組件化而生的，所以在目前組件化的框架中都在需要一種合適的CSS解決方案。
事實上，css一直是React的痛點，也是被很多開發者吐槽、詬病的一個點。
在組件化中選擇合適的CSS解決方案應該符合以下條件：
在這一點上，Vue做的要遠遠好于React：
Vue在CSS上雖然不能稱之為完美，但是已經足夠簡潔、自然、方便了，至少統一的樣式風格不會出現多個開發人員、多個項目采用不一樣的樣式風格。
相比而言，React官方并沒有給出在React中統一的樣式風格：
在這篇文章中，我會介紹挑選四種解決方案來介紹：
內聯樣式是官方推薦的一種css樣式的寫法：
export default class App extends PureComponent {
constructor(props) {
super(props);
this.state = {
titleColor: "red"
}
}
render() {
return (
<div>
<h2 style={{color: this.state.titleColor, fontSize: "20px"}}>我是App標題</h2>
<p style={{color: "green", textDecoration: "underline"}}>我是一段文字描述</p>
</div>
)
}
}內聯樣式的優點:
內聯樣式的缺點：
所以官方依然是希望內聯合適和普通的css來結合編寫；
普通的css我們通常會編寫到一個單獨的文件。
App.js中編寫React邏輯代碼：
import React, { PureComponent } from 'react';
import Home from './Home';
import './App.css';
export default class App extends PureComponent {
render() {
return (
<div className="app">
<h2 className="title">我是App的標題</h2>
<p className="desc">我是App中的一段文字描述</p>
<Home/>
</div>
)
}
}App.css中編寫React樣式代碼：
.title {
color: red;
font-size: 20px;
}
.desc {
color: green;
text-decoration: underline;
}這樣的編寫方式和普通的網頁開發中編寫方式是一致的：
比如編寫Home.js的邏輯代碼：
import React, { PureComponent } from 'react';
import './Home.css';
export default class Home extends PureComponent {
render() {
return (
<div className="home">
<h2 className="title">我是Home標題</h2>
<span className="desc">我是Home中的span段落</span>
</div>
)
}
}又編寫了Home.css的樣式代碼：
.title {
color: orange;
}
.desc {
color: purple;
}最終樣式之間會相互層疊，只有一個樣式會生效；
css modules并不是React特有的解決方案，而是所有使用了類似于webpack配置的環境下都可以使用的。
但是，如果在其他項目中使用，那么我們需要自己來進行配置，比如配置webpack.config.js中的modules: true等。
但是React的腳手架已經內置了css modules的配置：
使用的方式如下：
css modules用法
這種css使用方式最終生成的class名稱會全局唯一：
生成的代碼結構
css modules確實解決了局部作用域的問題，也是很多人喜歡在React中使用的一種方案。
但是這種方案也有自己的缺陷：
如果你覺得上面的缺陷還算OK，那么你在開發中完全可以選擇使用css modules來編寫，并且也是在React中很受歡迎的一種方式。
實際上，官方文檔也有提到過CSS in JS這種方案：
在傳統的前端開發中，我們通常會將結構（HTML）、樣式（CSS）、邏輯（JavaScript）進行分離。
當然，這種開發的方式也受到了很多的批評：
批評聲音雖然有，但是在我們看來很多優秀的CSS-in-JS的庫依然非常強大、方便：
目前比較流行的CSS-in-JS的庫有哪些呢？
目前可以說styled-components依然是社區最流行的CSS-in-JS庫，所以我們以styled-components的講解為主；
安裝styled-components：
yarn add styled-componentsES6中增加了模板字符串的語法，這個對于很多人來說都會使用。
但是模板字符串還有另外一種用法：標簽模板字符串（Tagged Template Literals）。
我們一起來看一個普通的JavaScript的函數：
function foo(...args) {
console.log(args);
}
foo("Hello World");正常情況下，我們都是通過 函數名() 方式來進行調用的，其實函數還有另外一種調用方式：
foo`Hello World`; // [["Hello World"]]如果我們在調用的時候插入其他的變量：
foo`Hello ${name}`; // [["Hello ", ""], "kobe"];在styled component中，就是通過這種方式來解析模塊字符串，最終生成我們想要的樣式的
styled-components的本質是通過函數的調用，最終創建出一個組件：
比如我們正常開發出來的Home組件是這樣的格式：
<div>
<h2>我是Home標題</h2>
<ul>
<li>我是列表1</li>
<li>我是列表2</li>
<li>我是列表3</li>
</ul>
</div>我們希望給外層的div添加一個特殊的class，并且添加相關的樣式：
styled-components基本使用
另外，它支持類似于CSS預處理器一樣的樣式嵌套：
const HomeWrapper = styled.div`
color: purple;
h2 {
font-size: 50px;
}
ul > li {
color: orange;
&.active {
color: red;
}
&:hover {
background: #aaa;
}
&::after {
content: "abc"
}
}
`最終效果如下
props可以穿透
定義一個styled組件：
const HYInput = styled.input`
border-color: red;
&:focus {
outline-color: orange;
}
`使用styled的組件：
<HYInput type="password"/>props可以被傳遞給styled組件
<HomeWrapper color="blue">
</HomeWrapper>使用時可以獲取到傳入的color：
const HomeWrapper = styled.div`
color: ${props => props.color};
}添加attrs屬性
const HYInput = styled.input.attrs({
placeholder: "請填寫密碼",
paddingLeft: props => props.left || "5px"
})`
border-color: red;
padding-left: ${props => props.paddingLeft};
&:focus {
outline-color: orange;
}
`支持樣式的繼承
編寫styled組件
const HYButton = styled.button`
padding: 8px 30px;
border-radius: 5px;
`
const HYWarnButton = styled(HYButton)`
background-color: red;
color: #fff;
`
const HYPrimaryButton = styled(HYButton)`
background-color: green;
color: #fff;
`按鈕的使用
<HYButton>我是普通按鈕</HYButton>
<HYWarnButton>我是警告按鈕</HYWarnButton>
<HYPrimaryButton>我是主要按鈕</HYPrimaryButton>styled設置主題
在全局定制自己的主題，通過Provider進行共享：
import { ThemeProvider } from 'styled-components';
<ThemeProvider theme={{color: "red", fontSize: "30px"}}>
<Home />
<Profile />
</ThemeProvider>在styled組件中可以獲取到主題的內容：
const ProfileWrapper = styled.div`
color: ${props => props.theme.color};
font-size: ${props => props.theme.fontSize};
`vue中添加class
在vue中給一個元素添加動態的class是一件非常簡單的事情：
你可以通過傳入一個對象：
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>你也可以傳入一個數組：
<div v-bind:class="[activeClass, errorClass]"></div>甚至是對象和數組混合使用：
<div v-bind:class="[{ active: isActive }, errorClass]"></div>react中添加class
React在JSX給了我們開發者足夠多的靈活性，你可以像編寫JavaScript代碼一樣，通過一些邏輯來決定是否添加某些class：
import React, { PureComponent } from 'react'
export default class App extends PureComponent {
constructor(props) {
super(props);
this.state = {
isActive: true
}
}
render() {
const {isActive} = this.state;
return (
<div>
<h2 className={"title " + (isActive ? "active": "")}>我是標題</h2>
<h2 className={["title", (isActive ? "active": "")].join(" ")}>我是標題</h2>
</div>
)
}
}
這個時候我們可以借助于一個第三方的庫：classnames
我們來使用一下最常見的使用案例：
classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'
// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'
// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'我是@半糖學前端 ，專注前端技術領域分享，關注我和我一起學習，共同進步！
React JS是一個功能強大的通用庫，使開發人員能夠構建復雜的web應用程序。遵循最佳實踐對于編寫可維護和可伸縮的React應用程序至關重要。對React 感興趣的同學，可以參加Web前端培訓，你可以學到更全面的知識和技能，提高應用開發工作效率。
文件夾結構
一個組織良好的文件夾結構可以在開發過程中產生顯著的差異。將相關的組件、樣式和實用程序分組在一起，可以更容易地查找和更新代碼。
DRY原則(不要重復)
DRY原則主張避免代碼重復。在React中，開發人員應該盡可能地重用組件和邏輯。
無狀態功能組件
無狀態功能組件，也稱為功能組件或表示組件，是React中推薦的最佳實踐。這些組件不維護狀態，只通過props接收數據。通過使用無狀態的功能組件，代碼變得更加模塊化，也更容易測試。
使用PropTypes
PropTypes是一個幫助對傳遞給組件的屬性進行類型檢查的庫。通過指定預期的數據類型以及是否需要某些屬性，開發人員可以發現錯誤并確保組件接收到正確的數據。
React中的高級樣式
樣式是創建吸引人的用戶界面的一個重要方面。React提供了各種樣式化組件的方法。在web前端培訓學習中，有很多關于React 的課程學習，有一些實操項目的訓練，可以幫助你將學到的理論知識應用到實踐中去，真正掌握React 的使用。
CSS模塊
CSS模塊允許開發人員在他們的組件中編寫模塊化和限定范圍的CSS。組件中定義的CSS規則僅適用于該特定組件，以防止意外的樣式沖突。CSS模塊增強了代碼的可維護性，并使得在大型應用程序中管理樣式變得更加容易。
樣式組件
樣式組件是一個流行的庫，它使開發人員能夠直接在他們的JavaScript代碼中編寫CSS。它使用帶標簽的模板文字來創建樣式化組件。樣式組件提供了一種更加動態和靈活的樣式化方法，使得基于屬性和狀態管理組件樣式變得更加容易。
反應狀態管理
隨著React應用程序變得越來越復雜，跨多個組件管理狀態變得越來越具有挑戰性。狀態管理庫可以幫助解決這個問題。
Redux
Redux是一個可預測的狀態管理庫，遵循Flux架構。它將應用程序的狀態集中在一個存儲中，并允許組件使用reducers和actions來訪問和修改狀態。Redux提供了清晰的關注點分離，簡化了大型應用程序中的數據流。通過web前端培訓，React 課程緊跟企業需求和市場需求，可以讓你學到最新的知識和技能，提高自身競爭力。
MobX
MobX是另一個流行的狀態管理庫，它為管理狀態提供了一種更加靈活和反應性更強的方法。它自動跟蹤可觀察對象之間的依賴關系，并在狀態改變時更新組件。MobX以其簡單性和易于與React應用程序集成而聞名。
帶React的服務器端渲染(SSR)
服務器端呈現是一種用于在將React應用程序發送到客戶端之前在服務器上呈現該應用程序的技術。這通過向搜索引擎提供完全呈現的HTML內容，改善了初始加載時間并增強了SEO。可以使用Next.js這樣的庫來實現SSR，這簡化了React應用中實現服務器端渲染的過程。
React安全最佳實踐
Web應用安全對于保護用戶數據和防止攻擊至關重要。React開發人員應該遵循這些最佳實踐:
XSS預防
XSS是一種常見的安全漏洞，使得攻擊者能夠將惡意腳本注入網頁。開發人員可以通過適當地凈化用戶輸入和使用像DOMPurify這樣的庫來凈化HTML來防止XSS攻擊。React是前端常用的一個框架，想要學會這個框架的使用技能，建議報名參加Web前端培訓，可以在短時間內獲得較大提升。
CSRF保護
跨站點請求偽造(CSRF)是另一種安全威脅，它涉及攻擊者誘騙用戶在不知情的情況下在網站上執行操作。為了抵御CSRF攻擊，開發人員應該使用CSRF令牌并實施嚴格的CORS策略。
React的未來
React還在繼續發展，它的未來看起來很有希望。一些值得關注的趨勢和發展包括：
反應并發模式：并發模式是一個即將到來的特性，它將允許React以一種更加漸進和可中斷的方式執行呈現。這將帶來更流暢的用戶體驗，尤其是對于具有復雜ui的應用程序。
React服務器組件：服務器組件旨在將服務器端渲染提升到一個新的水平。它們將允許開發人員將組件渲染卸載到服務器，從而加快加載速度。
改進的反應性能：React團隊一直致力于優化React的性能，使其更快、更高效。
結論
通過遵循最佳實踐，開發人員可以創建可伸縮、可維護、高性能的React應用程序，提供卓越的用戶體驗。在Web前端培訓中，也有關于React的學習和使用，理論知識結合實戰操作，學以致用，真正掌握前端技術。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
