;在我們的前端學(xué)習(xí)過去中我們肯定會比較煎熬,在基礎(chǔ)知識之后更是有框架和其他的方面學(xué)習(xí)是比較辛苦的,對于框架的話,今天就來和大家說說有關(guān)于“react有哪些基礎(chǔ)語法?”這個方面的問題吧!下面是小編分享的相關(guān)內(nèi)容希望對大家有所幫助!
一、渲染元素(函數(shù)方法、es6方式)
1、函數(shù)方法代碼如下:
function Clock(props) {
return (
<div>
<h1>Hello, world!</h1>
<h2>現(xiàn)在是 {props.date.toLocaleTimeString()}.</h2>
</div>
);
}
function tick() {
ReactDOM.render(
<Clock date={new Date()} />,
document.getElementById('example')
);
}
setInterval(tick, 1000);
2、es6方法代碼如下:
class Clock extends React.Component {
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>現(xiàn)在是 {this.props.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
function tick() {
ReactDOM.render(
<Clock date={new Date()} />,
document.getElementById('example')
);
}
setInterval(tick, 1000);
二、組件
1、使用函數(shù)定義組件,代碼如下:
function HelloMessage(props) {
return <h1>Hello World!</h1>;
}
也可以使用ES6 class 來定義組件,代碼如下:
class Welcome extends React.Component {
render() {
return <h1>Hello World!</h1>;
}
}
2、如果我們碰到需要向組件傳遞參數(shù)的話,我們可以使用?this.props
?對象,代碼如下:
function HelloMessage(props) {
return <h1>Hello {props.name}!</h1>;
}
const element = <HelloMessage name="Runoob"/>;
ReactDOM.render(
element,
document.getElementById('example')
);
當(dāng)然我們在添加屬性的時候,?class
?屬性需要寫成?class Name
? ,對于?for
?屬性的話我們則需要寫成?htmlFor
?,這是為什么呢?因為?class
?和?for
?是JavaScript的保留字,所以需要這么做。
3、復(fù)合組件
對于復(fù)合組件的話我們可以通過創(chuàng)建多個組件來進(jìn)行組合成一個組件,既可以把不同的功能的組件進(jìn)行分離,代碼如下:
<script type="text/babel">
function Name(props) {
return <h1>名稱:{props.name}</h1>;
}
function Url(props) {
return <h1>地址:{props.url}</h1>;
}
function Nickname(props) {
return <h1>小名:{props.nickname}</h1>;
}
function App() {
return (
<div>
<Name name="Tom" />
<Url url="https://www.cnblogs.com/freedom-feng/" />
<Nickname nickname="Jack" />
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('example')
);
</script>
三、事件
當(dāng)我們在通過使用ES6 class語法來定義一個組件的時候,事件處理器會成為類的一個方法,如下這個方法,我們通過Toggle組件渲染出一個可以讓用戶切換開關(guān)狀態(tài)的按鈕,代碼如下:
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// 這邊綁定是必要的,這樣 `this` 才能在回調(diào)函數(shù)中使用
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
ReactDOM.render(
<Toggle />,
document.getElementById('example')
);
但是呢,我們在使用的時候要注意;類的方法默認(rèn)是不會綁定this的,如果我們忘記綁定?this.handleClick
?并把它傳入?onClik
?,當(dāng)你調(diào)用這個函數(shù)的時候?this
?的值會是?undefined
?,當(dāng)然我們還可以使用下面這兩種方式類解決;
(1)、當(dāng)我們使用實驗性的屬性初始化器語法時,我們可以使用屬性初始化器來正確的綁定回調(diào)函數(shù),代碼如下:
<script type="text/babel">
class LoggingButton extends React.Component {
// 這個語法確保了 `this` 綁定在 handleClick 中
// 這里只是一個測試
handleClick = () => {
console.log('this is:', this);
}
render() {
return (
<button onClick={this.handleClick}>
Click me
</button>
);
}
}
ReactDOM.render(
<LoggingButton />,
document.getElementById('example')
);
</script>
(2)、如果沒有使用屬性化器語法的話我們可以回調(diào)函數(shù)中使用的箭頭函數(shù),代碼如下:
class LoggingButton extends React.Component {
handleClick() {
console.log('this is:', this);
}
render() {
// 這個語法確保了 `this` 綁定在 handleClick 中
return (
<button onClick={(e) => this.handleClick(e)}>
Click me
</button>
);
}
}
事件傳參代碼如下:
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
對于上面這兩種方法是等價的,而且在我們的案例中參數(shù)?e
?作為時間對象將被作為第二個參數(shù)進(jìn)行傳遞。通過箭頭函數(shù)的方式,事件對象必須顯式的進(jìn)行傳遞,但是通過?bind
?的方式,時間對象以及更多的參數(shù)將會被隱式的進(jìn)行傳遞。當(dāng)然我們還要注意:需要通過?bind
?方式向監(jiān)聽函數(shù)傳參,在類組件中定義的監(jiān)聽函數(shù),事件對象e要排在所傳參數(shù)的后面,代碼如下:
<script type="text/babel">
class Popper extends React.Component{
constructor(){
super();
this.state = {name:'Hello world!'};
}
preventPop(name, e){ //事件對象e要放在最后
e.preventDefault();
alert(name);
}
render(){
return (
<div>
<p>hello</p>
{/* 通過 bind() 方法傳遞參數(shù)。 */}
<button onClick={this.preventPop.bind(this,this.state.name)}>Click</button>
</div>
);
}
}
ReactDOM.render(
<Popper />,
document.getElementById('example')
);
</script>
四、條件渲染
我們在講解條件渲染是先看看這兩個組件,代碼如下:
function UserGreeting(props) {
return <h1>歡迎回來!</h1>;
}
function GuestGreeting(props) {
return <h1>請先注冊。</h1>;
}
之后我們在創(chuàng)建個?Greeting
?組件,這個組件會根據(jù)用戶是否登錄來顯示其中之一,代碼如下:
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
ReactDOM.render(
// 嘗試修改 isLoggedIn={true}:
<Greeting isLoggedIn={false} />,
document.getElementById('example')
);
五、元素變量
我們可以使用變量來儲存元素。它可以幫助你有條件的渲染組件的一部分,而輸出的其他部分不會更改。在下面的例子中,我們將要創(chuàng)建一個名為 ?LoginControl
?的有狀態(tài)的組件。它會根據(jù)當(dāng)前的狀態(tài)來渲染? <LoginButton />
? 或 ?<LogoutButton />
?,它也將渲染前面例子中的? <Greeting />
?。代碼如下:
class LoginControl extends React.Component {
constructor(props) {
super(props);
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = this.handleLogoutClick.bind(this);
this.state = {isLoggedIn: false};
}
handleLoginClick() {
this.setState({isLoggedIn: true});
}
handleLogoutClick() {
this.setState({isLoggedIn: false});
}
render() {
const isLoggedIn = this.state.isLoggedIn;
let button = null;
if (isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
}
return (
<div>
<Greeting isLoggedIn={isLoggedIn} />
{button}
</div>
);
}
}
ReactDOM.render(
<LoginControl />,
document.getElementById('example')
);
六、與運算發(fā)
我們可以通過用花括號包裹代碼在 JSX 中嵌入任何表達(dá)式 ,也包括 JavaScript 的邏輯與? &&
?,它可以方便地條件渲染一個元素,代碼如下:
<script type="text/babel">
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 &&
<h2>
您有 {unreadMessages.length} 條未讀信息。
</h2>
}
</div>
);
}
const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
<Mailbox unreadMessages={messages} />,
document.getElementById('example')
);
</script>
而其在 JavaScript 中,?true
?&& ?expression
? 總是返回 ?expression
?,而 ?false && expression
?總是返回 ?false
?。因此,如果條件是 true,&& 右側(cè)的元素就會被渲染,如果是 false,React 會忽略并跳過它。
(1)、三目運算符
條件渲染的另一種方法是使用 JavaScript 的條件運算符:導(dǎo)入代碼:
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
{isLoggedIn ? (
<LogoutButton onClick={this.handleLogoutClick} />
) : (
<LoginButton onClick={this.handleLoginClick} />
)}
</div>
);
}
七、阻止組件渲染
我們在極少數(shù)情況下,你可能希望隱藏組件,即使它被其他組件渲染。讓 render 方法返回 null 而不是它的渲染結(jié)果即可實現(xiàn)。那么現(xiàn)在我們來看看在下面的例子中,?<WarningBanner />
? 根據(jù)屬性 ?warn
?的值條件渲染。如果 ?warn
?的值是 ?false
?,則組件不會渲染帶代碼如下:
function WarningBanner(props) {
if (!props.warn) {
return null;
}
return (
<div className="warning">
警告!
</div>
);
}
class Page extends React.Component {
constructor(props) {
super(props);
this.state = {showWarning: true}
this.handleToggleClick = this.handleToggleClick.bind(this);
}
handleToggleClick() {
this.setState(prevState => ({
showWarning: !prevState.showWarning
}));
}
render() {
return (
<div>
<WarningBanner warn={this.state.showWarning} />
<button onClick={this.handleToggleClick}>
{this.state.showWarning ? '隱藏' : '顯示'}
</button>
</div>
);
}
}
ReactDOM.render(
<Page />,
document.getElementById('example')
);
在代碼中我,我們可以看到組件的 render 方法返回 null 并不會影響該組件生命周期方法的回調(diào)。例如,?componentWillUpdate
?和 ?componentDidUpdate
? 依然可以被調(diào)用。
八、列表
創(chuàng)建類別通過JavaScript的map()方法來進(jìn)行,代碼如下:
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((numbers) =>
<li>{numbers}</li>
);
ReactDOM.render(
<ul>{listItems}</ul>,
document.getElementById('example')
);
在代碼中可以將以上實例重構(gòu)成一個組件,組件接收數(shù)組參數(shù),每個列表元素分配一個 ?key
?,不然會出現(xiàn)警告 ?a key should be provided for list items,
?意思就是需要包含 key:代碼如下:
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
return (
<ul>{listItems}</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('example')
);
九、keys
對于這個keys來說他在 DOM 中的某些元素被增加或刪除的時候幫助 React 識別哪些元素發(fā)生了變化。因此你應(yīng)當(dāng)給數(shù)組中的每一個元素賦予一個確定的標(biāo)識。代碼如下:
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
一個元素的 key 最好是這個元素在列表中擁有的一個獨一無二的字符串。通常,我們使用來自數(shù)據(jù)的? id
? 作為元素的 key:代碼如下:
const todoItems = todos.map((todo) =>
<li key={todo.id}>
{todo.text}
</li>
);
然而當(dāng)元素沒有確定的 id 時,你可以使用他的序列號索引 ?index
?作為 key:代碼如下:
const todoItems = todos.map((todo, index) =>
// 只有在沒有確定的 id 時使用
<li key={index}>
{todo.text}
</li>
);
但是如果元素沒有確定的id,那么他可以是用index作為key,代碼如下:
const todoItems = todos.map((todo, index) =>
// 只有在沒有確定的 id 時使用
<li key={index}>
{todo.text}
</li>
);
如果列表可以重新排序,不建議使用索引來進(jìn)行排序,因為這會導(dǎo)致渲染變得很慢。
1、元素的key在兄弟之間應(yīng)該是唯一的。
我們知道在數(shù)組元素中使用的 key 在其兄弟之間應(yīng)該是獨一無二的。然而,它們不需要是全局唯一的。當(dāng)我們生成兩個不同的數(shù)組時,我們可以使用相同的鍵,代碼如下:
function Blog(props) {
const sidebar = (
<ul>
{props.posts.map((post) =>
<li key={post.id}>
{post.title}
</li>
)}
</ul>
);
const content = props.posts.map((post) =>
<div key={post.id}>
<h3>{post.title}</h3>
<p>{post.content}</p>
</div>
);
return (
<div>
{sidebar}
<hr />
{content}
</div>
);
}
const posts = [
{id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
{id: 2, title: 'Installation', content: 'You can install React from npm.'}
];
ReactDOM.render(
<Blog posts={posts} />,
document.getElementById('example')
);
當(dāng)然了,key 也會作為給 React 的提示,但不會傳遞給你的組件。如果您的組件中需要使用和 key 相同的值,請將其作為屬性傳遞:
代碼如下:
const content = posts.map((post) =>
<Post
key={post.id}
id={post.id}
title={post.title} />
);
2、在js中嵌入map()
我們首先將單獨的?listtems
?變量并將其包在?js
?中,代碼如下:
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<ListItem key={number.toString()}
value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}
JSX 允許在大括號中嵌入任何表達(dá)式,所以我們可以在 ?map()
? 中這樣使用,代碼如下:
function NumberList(props) {
const numbers = props.numbers;
return (
<ul>
{numbers.map((number) =>
<ListItem key={number.toString()}
value={number} />
)}
</ul>
);
}
總結(jié):
以上就是有 關(guān)于“react有哪些基礎(chǔ)語法?”這個問題的相關(guān)內(nèi)容,希望對大家有所幫助,當(dāng)然如果你有更好的方法也可以和大家一同分享討論,更多有關(guān)于react的相關(guān)內(nèi)容的知識我們都可以在W3cschool中進(jìn)行學(xué)習(xí)和了解。