React 基礎知識

一、元素

元素是構成 React 應用的最小單位。
ReactDOM.render() 方法實現react元素和根DOM（id值）的對應關係。
React 元素都是不可變的。當元素被創建之後，你是無法改變其內容或屬性的。
目前更新界面的唯一辦法是創建一個新的元素，然後將它傳入 ReactDOM.render() 方法。

//html 頁面中有一個id='example'，也可以用函數或類把需要展示的部分封裝起來。
function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>現在是 {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('example')
  );
}
//用函數封裝
function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>現在是 {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}
// React.Component 的 ES6 類封裝
class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>現在是 {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

二、JSX

JSX 是react用來替代常規 JavaScript的，是一個看起來很像 XML 的 JavaScript 語法擴展。
React 的 JSX 使用大、小寫的約定來區分本地組件的類（即React 組件，大寫字母開頭的本地變量）和 HTML 標籤（小寫字母的標籤名）。

var myStyle = {
    fontSize: 100,
    color: '#FF0000'
};
var arr = [
  <h1>菜鳥教程</h1>,
  <h2>學的不僅是技術，更是夢想！</h2>,
];
ReactDOM.render(
    <div> {/*嵌套多個 HTML 標籤，需要使用一個 div 元素包裹它*/}
    <h1 style = {myStyle}>菜鳥教程</h1> {/*添加內聯樣式*/}
    <h2>歡迎學習 React</h2>
    <p data-myattribute = "somevalue">這是一個很不錯的 JavaScript 庫!</p>  {/*自定義屬性需要加date- */}
    <h1>{1+1}</h1> {/*表達式要寫在{}中*/}
    <h1>{i == 1 ? 'True!' : 'False'}</h1> {/*不能使用if...else，但是有三元運算*/}
    {/*註釋寫在{}裏*/}
    {arr} {/*添加數組，數組會自動展開所有成員*/}
    </div>
    ,
    document.getElementById('example')
);

三、組件

可以用函數或者 ES6 class來定義組件。
注意，在添加屬性時， class 屬性需要寫成 className ，for 屬性需要寫成 htmlFor ，這是因爲 class 和 for 是 JavaScript 的保留字。

function HelloMessage(props) {
    return <h1>Hello {props.name}!</h1>; //使用 this.props 對象向組件傳達參數
}
//用戶自定義組件，注意，原生 HTML 元素名以小寫字母開頭，而自定義的 React 類名以大寫字母開頭，比如 HelloMessage
const element = <HelloMessage name="Runoob"/>;
 
ReactDOM.render(
    element,
    document.getElementById('example')
);

四、react state

React 把組件看成是一個狀態機
()=>this.tick() 是 ES6 中聲明函數的一種方式，叫做箭頭函數表達式。
基本語法：
(參數1, 參數2, …, 參數N) => { 函數聲明 }
(參數1, 參數2, …, 參數N) => 表達式（單一）

function FormattedDate(props) {
  return <h2>現在是 {props.date.toLocaleTimeString()}.</h2>;
}
 
class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
 //當組件第一次加載到 DOM 中，且生成定時器，稱之爲掛載，this.timerID爲計算器ID
 //componentDidMount()、componentWillUnmount() 方法稱爲生命週期鉤子
  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(), 
      1000
    );
  }
 //當組件被移除，定時器也清楚時，稱之爲卸載
  componentWillUnmount() {
    clearInterval(this.timerID);
  }
 
  tick() {
    this.setState({
      date: new Date()
    });
  }
 
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <FormattedDate date={this.state.date} />
      </div>
    );
  }
}
 
ReactDOM.render(
  <Clock />,
  document.getElementById('example')
);

注意：state 和 props 主要的區別在於 props 是不可變的，而 state 可以根據與用戶交互來改變。這就是爲什麼有些容器組件需要定義 state 來更新和修改數據。 而子組件只能通過 props 來傳遞數據。

五、react事件

React 元素的事件處理和 DOM 元素類似，但React 事件綁定屬性的命名採用駝峯式寫法。
如果採用 JSX 的語法你需要傳入一個函數作爲事件處理函數，而不是一個字符串(DOM 元素的寫法)

//html寫法
<button onclick="activateLasers()">
  激活按鈕
</button>
//react寫法
<button onClick={activateLasers}>
  激活按鈕
</button>

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

//html
<a href="#" onclick="console.log('點擊鏈接'); return false">
  點我
</a>
//react
function ActionLink() {
  function handleClick(e) {
    e.preventDefault(); //e 是一個合成事件
    console.log('鏈接被點擊');
  }
 
  return (
    <a href="#" onClick={handleClick}>
      點我
    </a>
  );
}

六、react條件渲染

React 中的條件渲染和 JavaScript 中的一致，使用 JavaScript 操作符 if 或條件運算符來創建表示當前狀態的元素。
true && expression 總是返回 expression，而 false && expression 總是返回 false。因此，如果條件是 true，&& 右側的元素就會被渲染，如果是 false，React 會忽略並跳過它。
三目運算符：condition ? true : false。
阻止組件渲染，只要讓 render 方法返回 null即可。

七、生命週期

生命週期的三個狀態及對應的方法：

• Mounting：已插入真實 DOM
  • componentWillMount（渲染前調用）
  • componentDidMount（第一次渲染後調用）
  • render
• Updating：正在被重新渲染
  • componentWillReceiveProps（組件接收到一個新的prop時調用）
  • shouldComponentUpdate（組件接收到新的props或者state時被調用，返回布爾值）
  • componentWillUpdate（在組件接收到新的props或者state但還沒有render時被調用）
  • render
  • componentDidUpdate（在組件完成更新後立即調用）
• Unmounting：已移出真實 DOM
  • componentWillUnmount（組件從 DOM 中移除之前被調用）