App下載

react有哪些基礎(chǔ)語(yǔ)法?基礎(chǔ)語(yǔ)法的使用經(jīng)驗(yàn)分享！

猿友 2021-06-25 16:36:40 瀏覽數(shù) (2281)
反饋

;在我們的前端學(xué)習(xí)過(guò)去中我們肯定會(huì)比較煎熬，在基礎(chǔ)知識(shí)之后更是有框架和其他的方面學(xué)習(xí)是比較辛苦的，對(duì)于框架的話，今天就來(lái)和大家說(shuō)說(shuō)有關(guān)于“react有哪些基礎(chǔ)語(yǔ)法?”這個(gè)方面的問(wèn)題吧！下面是小編分享的相關(guān)內(nèi)容希望對(duì)大家有所幫助！

一、渲染元素（函數(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 來(lái)定義組件，代碼如下：

class Welcome extends React.Component {
  render() {
    return <h1>Hello World!</h1>;
  }
}

2、如果我們碰到需要向組件傳遞參數(shù)的話，我們可以使用?this.props?對(duì)象，代碼如下：

function HelloMessage(props) {
    return <h1>Hello {props.name}!</h1>;
}
 
const element = <HelloMessage name="Runoob"/>;
 
ReactDOM.render(
    element,
    document.getElementById('example')
);

當(dāng)然我們?cè)谔砑訉傩缘臅r(shí)候，?class?屬性需要寫成?class Name? ，對(duì)于?for?屬性的話我們則需要寫成?htmlFor?，這是為什么呢？因?yàn)?class?和?for?是JavaScript的保留字，所以需要這么做。

3、復(fù)合組件

對(duì)于復(fù)合組件的話我們可以通過(guò)創(chuàng)建多個(gè)組件來(lái)進(jìn)行組合成一個(gè)組件，既可以把不同的功能的組件進(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)我們?cè)谕ㄟ^(guò)使用ES6 class語(yǔ)法來(lái)定義一個(gè)組件的時(shí)候，事件處理器會(huì)成為類的一個(gè)方法，如下這個(gè)方法，我們通過(guò)Toggle組件渲染出一個(gè)可以讓用戶切換開(kāi)關(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')
);

但是呢，我們?cè)谑褂玫臅r(shí)候要注意；類的方法默認(rèn)是不會(huì)綁定this的，如果我們忘記綁定?this.handleClick?并把它傳入?onClik?，當(dāng)你調(diào)用這個(gè)函數(shù)的時(shí)候?this?的值會(huì)是?undefined?，當(dāng)然我們還可以使用下面這兩種方式類解決；

(1)、當(dāng)我們使用實(shí)驗(yàn)性的屬性初始化器語(yǔ)法時(shí)，我們可以使用屬性初始化器來(lái)正確的綁定回調(diào)函數(shù)，代碼如下：

<script type="text/babel">
class LoggingButton extends React.Component {
  // 這個(gè)語(yǔ)法確保了 `this` 綁定在  handleClick 中
  // 這里只是一個(gè)測(cè)試
  handleClick = () => {
    console.log('this is:', this);
  }
 
  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}
ReactDOM.render(
  <LoggingButton />,
  document.getElementById('example')
);
</script>

(2)、如果沒(méi)有使用屬性化器語(yǔ)法的話我們可以回調(diào)函數(shù)中使用的箭頭函數(shù)，代碼如下：

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }
 
  render() {
    //  這個(gè)語(yǔ)法確保了 `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>

對(duì)于上面這兩種方法是等價(jià)的，而且在我們的案例中參數(shù)?e?作為時(shí)間對(duì)象將被作為第二個(gè)參數(shù)進(jìn)行傳遞。通過(guò)箭頭函數(shù)的方式，事件對(duì)象必須顯式的進(jìn)行傳遞，但是通過(guò)?bind?的方式，時(shí)間對(duì)象以及更多的參數(shù)將會(huì)被隱式的進(jìn)行傳遞。當(dāng)然我們還要注意：需要通過(guò)?bind?方式向監(jiān)聽(tīng)函數(shù)傳參，在類組件中定義的監(jiān)聽(tīng)函數(shù)，事件對(duì)象e要排在所傳參數(shù)的后面，代碼如下：

<script type="text/babel">
class Popper extends React.Component{
    constructor(){
        super();
        this.state = {name:'Hello world!'};
    }
    
    preventPop(name, e){    //事件對(duì)象e要放在最后
        e.preventDefault();
        alert(name);
    }
    
    render(){
        return (
            <div>
                <p>hello</p>
                {/* 通過(guò) bind() 方法傳遞參數(shù)。 */}
                <button onClick={this.preventPop.bind(this,this.state.name)}>Click</button>
            </div>
        );
    }
}

ReactDOM.render(
  <Popper />,
  document.getElementById('example')
);
</script>
四、條件渲染

我們?cè)谥v解條件渲染是先看看這兩個(gè)組件，代碼如下：

function UserGreeting(props) {
  return <h1>歡迎回來(lái)!</h1>;
}

function GuestGreeting(props) {
  return <h1>請(qǐng)先注冊(cè)。</h1>;
}

之后我們?cè)趧?chuàng)建個(gè)?Greeting?組件，這個(gè)組件會(huì)根據(jù)用戶是否登錄來(lái)顯示其中之一，代碼如下：

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}
 
ReactDOM.render(
  // 嘗試修改 isLoggedIn={true}:
  <Greeting isLoggedIn={false} />,
  document.getElementById('example')
);
五、元素變量

我們可以使用變量來(lái)儲(chǔ)存元素。它可以幫助你有條件的渲染組件的一部分，而輸出的其他部分不會(huì)更改。在下面的例子中，我們將要?jiǎng)?chuàng)建一個(gè)名為 ?LoginControl ?的有狀態(tài)的組件。它會(huì)根據(jù)當(dāng)前的狀態(tài)來(lá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')
);
六、與運(yùn)算發(fā)

我們可以通過(guò)用花括號(hào)包裹代碼在 JSX 中嵌入任何表達(dá)式 ，也包括 JavaScript 的邏輯與? &&?，它可以方便地條件渲染一個(gè)元素，代碼如下：

<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è)的元素就會(huì)被渲染，如果是 false，React 會(huì)忽略并跳過(guò)它。

(1)、三目運(yùn)算符

條件渲染的另一種方法是使用 JavaScript 的條件運(yùn)算符:導(dǎo)入代碼：

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? (
        <LogoutButton onClick={this.handleLogoutClick} />
      ) : (
        <LoginButton onClick={this.handleLoginClick} />
      )}
    </div>
  );
}
七、阻止組件渲染

我們?cè)跇O少數(shù)情況下，你可能希望隱藏組件，即使它被其他組件渲染。讓 render 方法返回 null 而不是它的渲染結(jié)果即可實(shí)現(xiàn)。那么現(xiàn)在我們來(lái)看看在下面的例子中，?<WarningBanner />? 根據(jù)屬性 ?warn ?的值條件渲染。如果 ?warn ?的值是 ?false?，則組件不會(huì)渲染帶代碼如下：


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 并不會(huì)影響該組件生命周期方法的回調(diào)。例如，?componentWillUpdate ?和 ?componentDidUpdate? 依然可以被調(diào)用。

八、列表

創(chuàng)建類別通過(guò)JavaScript的map（）方法來(lái)進(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')
);

在代碼中可以將以上實(shí)例重構(gòu)成一個(gè)組件，組件接收數(shù)組參數(shù)，每個(gè)列表元素分配一個(gè) ?key?，不然會(huì)出現(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

對(duì)于這個(gè)keys來(lái)說(shuō)他在 DOM 中的某些元素被增加或刪除的時(shí)候幫助 React 識(shí)別哪些元素發(fā)生了變化。因此你應(yīng)當(dāng)給數(shù)組中的每一個(gè)元素賦予一個(gè)確定的標(biāo)識(shí)。代碼如下：

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

　一個(gè)元素的 key 最好是這個(gè)元素在列表中擁有的一個(gè)獨(dú)一無(wú)二的字符串。通常，我們使用來(lái)自數(shù)據(jù)的? id? 作為元素的 key:代碼如下：

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

然而當(dāng)元素沒(méi)有確定的 id 時(shí)，你可以使用他的序列號(hào)索引 ?index ?作為 key：代碼如下：

const todoItems = todos.map((todo, index) =>
  // 只有在沒(méi)有確定的 id 時(shí)使用
  <li key={index}>
    {todo.text}
  </li>
);

但是如果元素沒(méi)有確定的id，那么他可以是用index作為key，代碼如下：

const todoItems = todos.map((todo, index) =>
  // 只有在沒(méi)有確定的 id 時(shí)使用
  <li key={index}>
    {todo.text}
  </li>
);

如果列表可以重新排序，不建議使用索引來(lái)進(jìn)行排序，因?yàn)檫@會(huì)導(dǎo)致渲染變得很慢。

1、元素的key在兄弟之間應(yīng)該是唯一的。

我們知道在數(shù)組元素中使用的 key 在其兄弟之間應(yīng)該是獨(dú)一無(wú)二的。然而，它們不需要是全局唯一的。當(dāng)我們生成兩個(gè)不同的數(shù)組時(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 也會(huì)作為給 React 的提示，但不會(huì)傳遞給你的組件。如果您的組件中需要使用和 key 相同的值，請(qǐng)將其作為屬性傳遞：

代碼如下：

const content = posts.map((post) =>
  <Post
    key={post.id}
    id={post.id}
    title={post.title} />
);

2、在js中嵌入map（）

我們首先將單獨(dú)的?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 允許在大括號(hào)中嵌入任何表達(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ǔ)語(yǔ)法？”這個(gè)問(wèn)題的相關(guān)內(nèi)容，希望對(duì)大家有所幫助，當(dāng)然如果你有更好的方法也可以和大家一同分享討論，更多有關(guān)于react的相關(guān)內(nèi)容的知識(shí)我們都可以在W3cschool中進(jìn)行學(xué)習(xí)和了解。


React.JS

0 人點(diǎn)贊