環(huán)境準(zhǔn)備

創(chuàng)建項(xiàng)目



npx create-react-app my-react



進(jìn)入項(xiàng)目并啟動(dòng)



cd my-react && npm start

1

src/index.js

先把src里面的東西全部刪掉，重寫了index.js



import React from 'react';

import ReactDOM from 'react-dom';



class App extends React.Component{

render(){

return (

<div>Hellow, World</div>

)

}

}



ReactDOM.render(<App/>, document.getElementById('root'));



JSX

一個(gè)React組件中，render方法中return出去的內(nèi)容就是這個(gè)組件將要渲染的內(nèi)容，然后Babel 會(huì)把 JSX 轉(zhuǎn)譯成一個(gè)名為 React.createElement() 函數(shù)調(diào)用。



React.createElement(

  'div',

  {},

  'Hello, World'

)



React.createElement() 接收三個(gè)參數(shù)：

第一個(gè)參數(shù)是必填，傳入的是似HTML標(biāo)簽名稱: ul, li, div;

第二個(gè)參數(shù)是選填，表示的是屬性: className;

第三個(gè)參數(shù)是選填, 子節(jié)點(diǎn): 要顯示的文本內(nèi)容;

React.createElement() 會(huì)預(yù)先執(zhí)行一些檢查，以幫助你編寫無錯(cuò)代碼，但實(shí)際上它創(chuàng)建了一個(gè)這樣的對象：



// 注意：這是簡化過的結(jié)構(gòu)

const element = {

  type: 'div',

  props: {

    className: '',

    children: 'Hello, world!'

  }

};



元素渲染

與瀏覽器的 DOM 元素不同，React 元素是創(chuàng)建開銷極小的普通對象。React DOM 會(huì)負(fù)責(zé)更新 DOM 來與 React 元素保持一致。

想要將一個(gè) React 元素渲染到根 DOM 節(jié)點(diǎn)中，只需把它們一起傳入 ReactDOM.render()：



const element = <h1>Hello, world</h1>;

ReactDOM.render(element, document.getElementById('root'));



render方法接收兩個(gè)參數(shù)，第一個(gè)參數(shù)為我們的 React 根級組件，第二個(gè)參數(shù)接收一個(gè) DOM 節(jié)點(diǎn)，代表我們將把和 React 應(yīng)用掛載到這個(gè) DOM 節(jié)點(diǎn)下，進(jìn)而渲染到瀏覽器中。



組件 & props

組件，從概念上類似于 JavaScript 函數(shù)。它接受任意的入?yún)ⅲ?“props”），并返回用于描述頁面展示內(nèi)容的 React 元素。

函數(shù)組件：



function Welcome(props){

renter (

<h1> Hello, {props.name} </h1>

)

}

<Welcome name="World"/>



該函數(shù)是一個(gè)有效的 React 組件，因?yàn)樗邮瘴ㄒ粠в袛?shù)據(jù)的 “props”（代表屬性）對象與并返回一個(gè) React 元素。這類組件被稱為“函數(shù)組件”，因?yàn)樗举|(zhì)上就是 JavaScript 函數(shù)。

class組件：



class Welcome extends React.Component {

render(){

renter (

<h1> Hello, {thhis.props.name} </h1>

)

}

}

<Welcome name="World"/>



組件名稱必須以大寫字母開頭。

組件無論是使用函數(shù)聲明還是通過 class 聲明，都決不能修改自身的 props。



State & 生命周期

State 與 props 類似，但是 state 是私有的，并且完全受控于當(dāng)前組件。



class Clock extends React.Component {

constructor(props){

super(props)

this.state = {

date : new Date()

}

}

componentDidMount() {

//這里是Clock組件第一次被渲染到DOM時(shí)會(huì)調(diào)用，也就是掛載

}



componentWillUnmount() {

//當(dāng)DOM組件Clock被刪除時(shí)，會(huì)調(diào)用，也就是卸載

}

render(){

return (

<div>

<h1>Hello, World</h1>

<h2>It's {this.state.date.toLocaleTimeString()}</h2>

</div>

)

}

}



修改state中數(shù)據(jù)：



class Clock extends React.Component {

constructor(props){

super(props)

this.state = {

date: new Date()

}

}

componentDidMount() {

//這里是Clock組件第一次被渲染到DOM時(shí)會(huì)調(diào)用，也就是掛載

this.timer = setInterval(()=>{

this.tick()

},1000)

}



tick(){

this.setState({

date: new Date()

})

}



componentWillUnmount() {

//當(dāng)DOM組件Clock被刪除時(shí)，會(huì)調(diào)用，也就是卸載

clearInterval(this.timer)

}

render(){

return (

<div>

<h1>Hello, World</h1>

<h2>It's {this.state.date.toLocaleTimeString()}</h2>

</div>

)

}

}



不要直接修改 State,構(gòu)造函數(shù)是唯一可以給 this.state 賦值的地方



this.setState({name: 'World'})

1

State 的更新可能是異步的,要解決這個(gè)問題，可以讓setState接受一個(gè)函數(shù)而不是一個(gè)對象，這個(gè)函數(shù)用上一個(gè) state 作為第一個(gè)參數(shù)，將此次更新被應(yīng)用時(shí)的 props 做為第二個(gè)參數(shù)：



this.setState((state, props) => ({

  counter: state.counter + props.increment

}));



事件處理

React 事件的命名采用小駝峰式（camelCase），而不是純小寫。

使用 JSX 語法時(shí)你需要傳入一個(gè)函數(shù)作為事件處理函數(shù)，而不是一個(gè)字符串。

在 React 中一個(gè)不同點(diǎn)是你不能通過返回 false 的方式阻止默認(rèn)行為。你必須顯式的使用 preventDefault 。例如，傳統(tǒng)的 HTML 中阻止鏈接默認(rèn)打開一個(gè)新頁面，你可以這樣寫：



<a href="#" onclick="console.log('The link was clicked.'); return false">

  Click me

</a>



在 React 中，可能是這樣的：



function ActionLink() {

  function handleClick(e) {

    e.preventDefault();

    console.log('The link was clicked.');

  }



  return (

    <a href="#" onClick={handleClick}>

      Click me

    </a>

  );

}



class函數(shù)中綁定this



class LoggingButton extends React.Component {

  handleClick() {

    console.log('this is:', this);

  }



  render() {

    // 此語法確保 handleClick 內(nèi)的 this 已被綁定。

    return (

      <button onClick={() => this.handleClick()}>

        Click me

      </button>

    );

  }

}



在循環(huán)中，通常我們會(huì)為事件處理函數(shù)傳遞額外的參數(shù)



<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>

<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

1

2

列表和key



function ListItem(props) {

  return <li>{props.value}</li>;

}



function NumberList(props) {

  const numbers = props.numbers;

  const listItems = numbers.map((number) =>

    <ListItem key={number.toString()}  value={number} />

  );

  return (

    <ul>

      {listItems}

    </ul>

  );

}



const numbers = [1, 2, 3, 4, 5];

ReactDOM.render(

  <NumberList numbers={numbers} />,

  document.getElementById('root')

);



語法

在 JSX 中所有的屬性都要更換成駝峰式命名，比如 onclick 要改成 onClick，唯一比較特殊的就是 class，因?yàn)樵?JS 中 class 是保留字，我們要把 class 改成 className 。