React--官方文檔學(xué)習(xí)

一、在組件中寫style的樣式表

需要將樣式單獨(dú)提出，并定義一個(gè)變量，然后調(diào)用

const style01 = {
  display:'block'
};

<i style={style01}>

二、JSX和Dom屬性

const element = <div tabIndex="0"></div>;
const element = <img src={user.avatarUrl}></img>;

JSX語(yǔ)法中，為Dom元素添加屬性時(shí)：
1、如果屬性值是String，則用 引號(hào) 引起來(lái)。
2、如果屬性值是JS表達(dá)式，則用 單花括號(hào){ }括起來(lái)。

三、State & 生命周期

1、this.setState()

this.setState( Object | Function(prevState, props) )
因?yàn)?this.state和 this.props的更新是異步的，所以不能依賴他倆來(lái)計(jì)算更新state。

//錯(cuò)誤寫法：依賴this.state 和 this.props來(lái)直接改變state。
this.setState({
  counter: this.state.counter + this.props.increment,
});
// 正確寫法：依賴函數(shù)傳遞當(dāng)前的state和props來(lái)改變state
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

四、事件處理

1、與傳統(tǒng)DOM元素的區(qū)別

  • React事件綁定屬性的命名采用駝峰式寫法，而不是小寫。
  • 如果采用 JSX 的語(yǔ)法你需要傳入一個(gè)函數(shù)作為事件處理函數(shù)，而不是一個(gè)字符串(DOM元素的寫法)
# 例子：
<button onClick={activateLasers}>
  Activate Lasers
</button>

2、阻止默認(rèn)事件

在 React 中另一個(gè)不同是你不能使用返回 false 的方式阻止默認(rèn)行為。你必須明確的使用 preventDefault。

# 傳統(tǒng)JS，return false  來(lái)阻止默認(rèn)行為。
<a href="#" onclick="console.log('The link was clicked.'); return false">
  Click me
</a>

# React 寫法
function ActionLink() {
  function handleClick(e) {
    e.preventDefault();  // 阻止默認(rèn)事件
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

3、JSX 回調(diào)函數(shù)中 this 的問題

1）、默認(rèn)你需要使用bind 在constructor(){}，對(duì)函數(shù)進(jìn)行this的綁定

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: 'Diana' };
    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);  // 在constructor中進(jìn)行this綁定
  }
  handleClick() {
    console.log(this.state.name);
  }
  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

2）、你還可以這么寫

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: 'Diana' };
  }
  /**
   *  這種寫法可以不用 綁定 this，不過這屬于 實(shí)驗(yàn)寫法。需要配合：
   *  @babel/plugin-proposal-class-properties 包 來(lái)使用。
   *  在 .babelrc 中配置：
   *    {
          "plugins": ["@babel/plugin-proposal-class-properties"]
        }
   */
  handleClick = () => {
    console.log(this.state.name);
  }
  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

3）、可以直接在回調(diào)函數(shù)中使用箭頭函數(shù)。 不建議這么寫

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    return (
      // 為handleClick函數(shù)綁定了this。
      <button onClick={
          (e) => this.handleClick(e)
        }
      >
        Click me
      </button>
    );
  }
}

但是這樣有一個(gè)問題：就是這個(gè)組件每次被渲染的時(shí)候onClick 的回調(diào)函數(shù)都會(huì)被重新渲染，從而導(dǎo)致性能問題，所以不建議這么寫。

4、回調(diào)函數(shù)傳參

 /**
   *  1、通過 bind(this,params,..)方法， evenet 永遠(yuǎn)被默認(rèn)放在形參的最后一個(gè)
   */
  handleClick3 (name, sex, e) {
    console.log(e);
    alert(`${name} + ${sex}`);
  }
  <button onClick={this.handleClick3.bind(this, this.state.name, this.state.sex)}>
     點(diǎn)我點(diǎn)我！
  </button>

  /**
   *  2、通過 箭頭函數(shù)方法， evenet 可以被顯式傳遞，隨便放那個(gè)位置都行
   */
  handleClick4 (e, name, sex) {
    console.log(e);
    alert(`${name} + ${sex}`);
  }
  <button onClick={ (e) => this.handleClick4(e, this.state.name, this.state.sex)  } >
     你點(diǎn)我試試！！
  </button>

五、條件渲染

六、列表 & Keys

1、Keys

注意key的重要性，便于React識(shí)別哪些元素發(fā)生了變化。
如果列表可以重新排序，我們不建議使用索引來(lái)進(jìn)行排序，因?yàn)檫@會(huì)導(dǎo)致渲染變得很慢。

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('root')
);

2、DOM 元素 li 升級(jí)成 <Li /> 組件后 的key問題

如果把DOM元素抽象成 React組件后，就不能再原來(lái)的DOM元素上加key，應(yīng)該在抽象后的React 組件上加。

# 錯(cuò)誤的示例
function ListItem(props) {
  const value = props.value;
  return (
    // 錯(cuò)啦！你不需要在這里指定key:
    <li key={value.toString()}>
      {value}
    </li>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    //錯(cuò)啦！元素的key應(yīng)該在這里指定：
    <ListItem value={number} />
  );
  return (
    <ul> {listItems} </ul>
  );
}

# 正確的示例
function ListItem(props) {
  // 對(duì)啦！這里不需要指定key:
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 又對(duì)啦！key應(yīng)該在數(shù)組的上下文中被指定
    <ListItem key={number.toString()}
              value={number} />
  );
  return (
    <ul> {listItems} </ul>
  );
}

N、便利組件的 key 屬性

Keys only make sense in the context of the surrounding array.
所以我們應(yīng)該把key屬性加在循環(huán)體中的元素上(可能是具體的標(biāo)簽，也可能是包含了某個(gè)標(biāo)簽的組件)。

function ListItem(props) {
  const value = props.value;
  return (
    // 1、雖然最終的結(jié)果是若干個(gè)<li/>標(biāo)簽，但是<li/>標(biāo)簽并不是直接在循環(huán)體中，所以不需要加key。
    <li key={value.toString()}>
      {value}
    </li>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 2、雖然這里用到的是包裝了<li/>標(biāo)簽的組件，但是它在循環(huán)體中，所以需要添加key字段。
    <ListItem value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

、可控Form表單

1、submit handler

This form has the default HTML form behavior of browsing to a new page when the user submits the form.

//submit handler,
handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
   // 阻止form表單默認(rèn)行為。 
   event.preventDefault(); 
  }
//form表單
<form onSubmit={this.handleSubmit}> 
    ...
</form>
2、textarea 默認(rèn)值
< textarea value="React 設(shè)置textare默認(rèn)值的方式"/>
3、select 默認(rèn)選中項(xiàng)

1、傳統(tǒng)HTML的select我們只要在某一個(gè)option中添加 selected屬性，它就會(huì)默認(rèn)選中。
2、React 只要在 select標(biāo)簽中添加value屬性，指定需要默認(rèn)選中的項(xiàng)。

// 因?yàn)樵?select中設(shè)置了 value="d"，所以<option value="d"/> 默認(rèn)被選中。
<select value="d">
  <option value="">--請(qǐng)選擇--</option>
  <option value="a">a</option>
  <option value="b">b</option>
  <option value="c">c</option>
  <option value="d">d</option>
</select>
4、input框

如果給input框設(shè)定了 value 固定值(1、'2'、'')會(huì)導(dǎo)致無(wú)法輸入。

處理方式：要么不設(shè)置value，要么設(shè)置為：value={null或 undefined}

、props.children

  • String、Expressions、Functions、JSX都可以作為組件的children來(lái)傳遞。
<div>
'我是一個(gè)String'   //String
{ 1 + 2 + 3 + 4 }  // 表達(dá)式
// 函數(shù)表達(dá)式
{(index) => <div key={index}>This is item {index} in the list</div>}
<Children/>
</div>
  • Booleans, Null, and Undefined 會(huì)被忽略，0 不會(huì)被處理成 false(這一點(diǎn)與js不太一樣)。
## 示例：
<div>
  {bool && <Header />}
  <p>你好</p>
</div>
### 1、bool === true/ '0' / [] / {}:
<div>
  <Header />
  <p>你好</p>
</div>
### 2、bool === fasle/null/undefined :
<div>
  <p>你好</p>
</div>
### 3、bool ===0:
<div>
  0
  <p>你好</p>
</div>

判斷數(shù)組長(zhǎng)度時(shí)，不要簡(jiǎn)寫：someArray.length，這樣寫：someArray.length > 0
想展示：Booleans, Null, Undefined：String('Booleans / Null / Undefined')

N、React-Router RestFul風(fēng)格傳參

如果 某一個(gè)參數(shù)加了()，如(/:params1)，那么url中沒有/:params1也能匹配到
通過 this.props.routeParams.形參名稱 來(lái)獲取

//路由
<Route path="/getParams/:params0(/:params1)" component={Comp01} />

//頁(yè)面中的 <a>標(biāo)簽
<a href="/#/getParams/我是一個(gè)實(shí)參/我是另一個(gè)">Restfull 傳參</a>

//組件JS中獲取參數(shù)
<h1>    
        Hello {this.props.routeParams.params0},and {this.props.routeParams.params1}
</h1>
//請(qǐng)求路徑
http://localhost:3000/#/getParams/我是一個(gè)實(shí)參/我是另一個(gè)
// 效果
##  Hello 我是一個(gè)實(shí)參,and 我是另一個(gè)

或：
//請(qǐng)求路徑
http://localhost:3000/#/getParams/我是一個(gè)實(shí)參
// 效果
##  Hello 我是一個(gè)實(shí)參,and
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容