【React】
React（也被稱為React.js或ReactJS）是一個(gè)用于構(gòu)建用戶界面的JavaScript庫(kù)。它由Facebook和一個(gè)由個(gè)人開(kāi)發(fā)者和公司組成的社區(qū)來(lái)維護(hù)。
React可以作為開(kāi)發(fā)單頁(yè)或移動(dòng)應(yīng)用的基礎(chǔ)。然而，React只關(guān)注向DOM渲染數(shù)據(jù)，因此創(chuàng)建React應(yīng)用通常需要使用額外的庫(kù)來(lái)進(jìn)行狀態(tài)管理和路由，Redux和React Router分別是這類庫(kù)的例子。
基本用法
下面是一個(gè)簡(jiǎn)單的React在HTML中使用JSX和JavaScript的例子。
<div id="myReactApp"></div>
<script type="text/babel">
function Greeter(props)?{
return <h1>{props.greeting}</h1>;
??}文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-486222.html
var App?=?<Greeter greeting="Hello?World!" />;
ReactDOM.render(App,?document.getElementById("myReactApp"));
</script>
Greeter函數(shù)是一個(gè)React組件，它接受一個(gè)屬性問(wèn)候語(yǔ)。變量App是Greeter組件的一個(gè)實(shí)例，其中問(wèn)候語(yǔ)屬性被設(shè)置為?"Hello World！"。然后，ReactDOM.render方法將我們的Greeter組件渲染在DOM元素（id為?myReactApp）中。
在web瀏覽器中顯示時(shí)，結(jié)果將是：
<div id="myReactApp">
<h1>Hello?World!</h1>
</div>
顯著特點(diǎn)
組件化
React代碼由稱為組件的實(shí)體組成。組件可以使用React DOM庫(kù)渲染到DOM中的一個(gè)特定元素。當(dāng)渲染一個(gè)組件時(shí)，可以傳入被稱為?"props "的值。
ReactDOM.render(<Greeter greeting="Hello?World!"?/>,?document.getElementById('myReactApp'));
React中聲明組件的兩種主要方式是通過(guò)功能函數(shù)組件和基于類的組件。
功能函數(shù)組件
功能組件是用一個(gè)函數(shù)聲明，用來(lái)返回一些JSX。
const Greeting?=?(props)?=> <div>Hello,?{props.name}!</div>;
類組件
基于類的組件是使用ES6類來(lái)聲明的。它們也被稱為?"有狀態(tài)?"組件，因?yàn)樗鼈兊臓顟B(tài)可以在整個(gè)組件中保持，并且可以通過(guò)props傳遞給子組件。
class ParentComponent extends React.Component?{
state?=?{?color: 'green'?};
render()?{
return?(
<ChildComponent color={this.state.color} />
????);
??}
}文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-486222.html
到了這里，關(guān)于三大前端技術(shù)(React,Vue,Angular)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
