【小入門】react極簡入門

前言

本文爲react入門介紹，一些基本的概念和知識點，僅供未使用過react童鞋瞭解參考，若已使用過react，則此文對你可能毫無價值。

React 簡介

React的意義

React 把過去不斷重複構建 UI 的過程抽象成了組件，且在給定參數的狀況下約 定渲染對應的 UI 界面。React 能充分利用不少函數式方法去減小冗餘代碼。此外，因爲它自己就 是簡單函數，因此易於測試。能夠說，函數式編程纔是 React 的精髓

JSX(含易錯點)

JSX簡介

下面是最簡單的JSX變量

const element = <h1>Hello, world!</h1>;
複製代碼

能夠在JSX內直接使用JavaScript 表達式，可是：在 JSX 當中的表達式要包含在大括號裏

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);
複製代碼

JSX屬性

引號定義字符串屬性，大括號定義以JS表達式爲值的屬性。 可是：大括號外面再嵌套引號，會將引號內的都處理爲字符串

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

JSX嵌套

標籤是閉合的，必須像HTML那樣有結尾，如 /> JSX使用駝峯法定義屬性名稱，更像JS

JSX表明objects 對象

組件

組件從概念上看就像是函數，它能夠接收任意的輸入值（稱之爲「props」），並返回一個須要在頁面上展現的React元素。 props就像是即將傳入組件的參數 下方是定義一個組件的方法，它接收一個單一的props」對象並返回一個React元素。咱們之因此稱這種類型的組件爲函數定義組件，是由於從字面上來看，它就是一個JavaScript函數。

//使用JS函數
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
//使用ES6 class
class Welcome extends React.Component {
  render() {
 return <h1>Hello, {this.props.name}</h1>;
  }
}
複製代碼

組件渲染

當React遇到的元素是用戶自定義的組件，它會將JSX屬性做爲單個對象傳遞給該組件,這個對象稱之爲「props」。例如,這段代碼會在頁面上渲染出"Hello,Sara":

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);
複製代碼

組件必須以大寫字母開頭

組件組合

組件能夠組合，可是：組件的返回值只能有一個根元素。這也是咱們要用一個div包裹組件元素的緣由

function App() {
  return (
 <div>
 <Welcome name="Sara" />
 <Welcome name="Cahal" />
 <Welcome name="Edite" />
 </div>
  );
}
複製代碼

組件提取（重點）

//原複雜組件，不可重用
function Comment(props) {
  return (
 <div className="Comment">
 <div className="UserInfo">
 <img className="Avatar"
 src={props.author.avatarUrl}
 alt={props.author.name} />
 </div>
 </div>
  );
}
//拿出來獨立的部分，自定義組件（由於是組件，因此author和user究竟叫什麼，意義不大，只要組件易懂便可）
function Avatar(props) {
  return (
 <img className="Avatar"
 src={props.user.avatarUrl}
 alt={props.user.name}
 />
  );
}
//當須要使用Avatar這個組件的時候，傳入屬性值，可以從父組件獲得數據便可，這裏假設，父組件的屬性，就是命名爲author，如今使用Avatar：
<Avatar user={props.author} />
//能夠看到，這裏，Avatar就的user就是它父組件的author，得到了屬性值。這就是最基本的組件提取

複製代碼

props的只讀性

像純函數那樣使用props：當它沒有改變它本身的輸入值，當傳入的值相同時，老是會返回相同的結果。state能夠在不違反上面規則的前提下，動態改變輸出

state和生命週期

定義爲類的組件，纔有額外的特性。

將函數轉換爲類

方法步驟：

1. 建立一個名稱擴展爲React.Component的ES6 類
2. 建立一個叫作render()的空方法
3. 將函數體移動到render()方法中
4. 在render()方法中，使用this.props替換props
5. 刪除剩餘的空函數聲明

//原 函數定義的組件
function Clock(props) {
  return (
 <div>
 <h1>Hello, world!</h1>
 <h2>It is {props.date.toLocaleTimeString()}.</h2>
 </div>
  );
}
//現 類組件 
class Clock extend React.Component{
 render(){
 return (
 <div>
 <h1>Hello, world!</h1>
 <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
 </div>
  );
 }
}
複製代碼

還有一種老方法，React.createClass，區別點擊連接

事件處理

語法不一樣

1. React事件綁定屬性的命名採用駝峯式寫法，而不是小寫。
2. 若是採用 JSX 的語法你須要傳入一個函數做爲事件處理函數，而不是一個字符串(DOM元素的寫法)

//HTML寫法
<button onclick="activateLasers()">
  Activate Lasers
</button>
//JSX寫法
<button onClick={activateLasers}>
  Activate Lasers
</button>
複製代碼

阻止默認行爲

不能使用返回 false 的方式阻止默認行爲。你必須明確的使用 preventDefault

//HTML
<a href="#" onclick="console.log('The link was clicked.'); return false">
  Click me
</a>
//reafunction ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

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

2種事件處理的寫法（疑問：爲何必須將handleClick: function(event)等換成handleClick(event)才能順利運行？）

//第一種，ES6寫法
 class LikeButton extends React.Component {
	       constructor(props) {
         super(props);
         this.state = {liked: true};
		      this.handleClick = this.handleClick.bind(this);
      }
         getInitialState() {
          return {liked: false};
        }
        handleClick(event) {
          this.setState({liked: !this.state.liked});
        }
        render() {
          var text = this.state.liked ? '喜歡' : '不喜歡';
          return (
            <p onClick={this.handleClick}>
              你<b>{text}</b>我。點我切換狀態。
            </p>
          );
        }
      }

      ReactDOM.render(
        <LikeButton />,
        document.getElementById('root')
      );
      
 //第二種
  var LikeButton = React.createClass({
        getInitialState: function() {
          return {liked: false};
        },
        handleClick: function(event) {
          this.setState({liked: !this.state.liked});
        },
        render: function() {
          var text = this.state.liked ? '喜歡' : '不喜歡';
          return (
            <p onClick={this.handleClick}>
              你<b>{text}</b>我。點我切換狀態。
            </p>
          );
        }
      });

      ReactDOM.render(
        <LikeButton />,
        document.getElementById('root')
      );
複製代碼

條件渲染

與JS種使用沒什麼區別，使用較簡單

與運算符 && 的特性

{unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
複製代碼

在 JavaScript 中，true && expression 老是返回 expression，而 false && expression 老是返回 false。所以，若是條件是 true，&& 右側的元素就會被渲染，若是是 false，React 會忽略並跳過它。

列表 keys

map()函數

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);//[2, 4, 6, 8, 10]
複製代碼

使用map()渲染列表

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((numbers) =>
  <li>{numbers}</li>
);//listItems 渲染的是不少個<li></li>標籤，裏面的內容是numbers通過map()出來的，因此下方會渲染出5個li，外面需加上ul嵌套，不然報錯?(**需確認**)

ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('root')
);
複製代碼

用keys提取組件

官方文檔的解釋有點不夠清晰 實際上，在哪輸出列表，就是在哪定義key。即便使用某組件接收列表值，也是在接收的時候定義key，而不是在這個組件中定義key。其實這個稍微想想就能夠理解了。 組件就是放在那給你們使用的，誰都能用，你給他定義了key，那怎麼玩？

function ListItem(props) {
  // 對啦！這裏不須要明確出key:
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 又對啦！key應該在數組中被明確出來
    <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')
);
複製代碼

表單

受控組件

像<input><textarea>, 和 <select>這類表單元素會維持自身狀態，並根據用戶輸入進行更新。但在React中，可變的狀態一般保存在組件的狀態屬性中，而且只能用 setState(). 方法進行更新

這邊直接能夠在文檔中查看，連接

在react中,<input>,<textarea><select>是很是類似的，也是用this.state = {value: '你好.'};設置默認值。用handleChange(event) {this.setState({value: event.target.value});}獲取輸入值，用<textarea value={this.state.value} onChange={this.handleChange} />動態渲染輸入值。

可是在React中，會在根select標籤上而不是在當前的selected屬性上使用value屬性。代碼連接

//經過如下代碼能夠看到，{value: 'lime'}中的默認值是小寫的，即，是標籤上的屬性，不然默認選擇第一個屬性
this.state = {value: 'lime'};
//省略代碼
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
複製代碼

多個輸入框的解決辦法

當你有處理多個受控的input元素時，你能夠經過給每一個元素添加一個name屬性，來讓處理函數根據 event.target.name的值來選擇作什麼。

class Reservation extends React.Component {
  constructor(props) {
    super(props);
    //this.state這邊設置默認值
    this.state = {
      isGoing: true,
      numberOfGuests: 2
    };

    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    //定義目標的name值
    const name = target.name;

    //this.setState這邊根據標籤的name，來肯定設置的值
     this.setState({
      [name]: value
    });
  }

  render() {
    return (
      <form>
        <label>
          Is going:
          <input
	  //這裏的name
            name="isGoing"
            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          Number of guests:
          <input
	  //這裏的name
            name="numberOfGuests"
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
        </label>
      </form>
    );
  }
}

複製代碼

狀態提高

點擊連接參考詳細文檔

組合繼承

首先**children是保留關鍵字**，在使用props.children的時候，才能在組件中直接嵌套JSX 只有當此處是children時，才能在組件中直接嵌套JSX。自定義的組件應當屬性傳遞給父組件

function Child() {
  return <div>子組件</div>;
}
function Father(props) {
  return (
    <div>
      <p>父組件</p>
      {props.aaa}
    </div>
  );
}
function App() {
  return (
    <Father aaa={<Child/>}>
      <p>直接嵌套的JSX</p>
    </Father>
  );
}
ReactDOM.render(
  <App/>,
  document.getElementById('root')
);
//上面的代碼顯示爲：父組件 子組件

function Child() {
  return <div>子組件</div>;
}
function Father(props) {
  return (
    <div>
      <p>父組件</p>
      {props.children}
    </div>
  );
}
function App() {
  return (
    <Father children={<Child/>}>
      <p>直接嵌套的JSX</p>
    </Father>
  );
}
ReactDOM.render(
  <App/>,
  document.getElementById('root')
);
//上面的代碼顯示爲： 父組件 直接嵌套的JSX

複製代碼