React隨記

爲什麼使用JSX?

按文檔的說法，react認爲渲染邏輯與UI邏輯內在耦合,即，在UI中需要綁定處理事件，在某時候狀態變化時需要UI響應的做出變化。
例：

const title="react"
const boxEl=<h3>{title}</h3>
ReactDom.rendet(
   boxEl,
   docuemnt.getElementById('root')
)

react通過將標記（html）與邏輯（js）同放在稱之爲“組件”的鬆散耦合單元之中來實現關注點分離，而不是人爲的將標記與邏輯分離到不同的文件中（人爲分離方式）。

JSX特點

• 可嵌入表達式
  在jsx語法中，通過大括號可以放置任何有效的JavaScript表達式，例：
  變量，方法，運算等。
  例：

  <h1>{getNme('小明')}</h1>
  <h1 className={isOff?'class1':'class2'}>{getNme('小明')}</h1>
  <h1 className={isOff?'class1':'class2'}>{this.state.age+1}</h1>
  

• jsx也是一個表達式
  在編譯之後，jsx表達式會被轉爲普通JavaScript函數調用，並且對齊取值後得到JavaScript對象。
  所以可將jsx賦值給變量，把jsx當做參數傳入，以及從函數中返回jsx，例：

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

• jsx特定屬性
  同一屬性不能同時使用引號和大括號，只能使用一個
  例：

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

• jsx能夠包含很多子元素

const element = (
  <div>
    <h1>1</h1>
    <h2>2</h2>
  </div>
);

• jsx 防止注入攻擊

React DOM 在渲染所有輸入內容之前，默認會進行轉義。它可以確保在你的應用中，永遠不會注入那些並非自己明確編寫的內容。所有的內容在渲染之前都被轉換成了字符串。這樣可以有效地防止 XSS（cross-site-scripting, 跨站腳本）攻擊。

• jsx表示對象
  Babel 會把 JSX 轉譯成一個名爲 React.createElement() 函數調用。
  以下兩種示例代碼完全等效：

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement() 會預先執行一些檢查，以幫助你編寫無錯代碼，但實際上它創建了一個這樣的對象：

// 注意：這是簡化過的結構
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

這些對象被稱爲 “React 元素”。它們描述了你希望在屏幕上看到的內容。React 通過讀取這些對象，然後使用它們來構建 DOM 以及保持隨時更新。

React 元素渲染

react元素是構成React應用的最小磚塊。例：

const element=<h1>title</h1>

與瀏覽器的 DOM 元素不同，React 元素是創建開銷極小的普通對象。React DOM 會負責更新 DOM 來與 React 元素保持一致。

• 將一個元素渲染爲DOM
  <div id='root'></div>
  我們將其稱爲“根” DOM 節點，因爲該節點內的所有內容都將由 React DOM 管理。所以react應用就是有根節點與各組件組成。
  渲染方式：ReactDOM.render();

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

通常react構建的應用只有單一的根DOM節點。

• 更新已渲染的元素
  React 元素是不可變對象。一旦被創建，你就無法更改它的子元素或者屬性。例：

 const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2 indexId={math.random()}>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));

上面中，它的子元素,屬性indexId在render後就無法更改了，這時候如果需要更改，唯一方式就是創建一個全新的元素，並將其傳入 ReactDOM.render()。
例下面的計時器例子：

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

但實際開發中，基本我們的react應用只會調用一次 ReactDOM.render()，在index.js中，（ReactDOM.render(< app/>, document.getElementById(‘root’)); ）

• React只更新它需要更新的部分
  React DOM 會將元素和它的子元素與它們之前的狀態進行比較，並只會進行必要的更新來使 DOM 達到預期的狀態。

綁定點擊事件

const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));

react註釋（在render return中的註釋）：

{/* 註釋內容 */}

react引入圖片（圖片背景）的幾種方式：

//引入方式一：
import tsIcon from ‘…/images/typescript.jpeg’;

//引入方式二：
const tsIcon = require(’…/images/typescript.jpeg’);

//圖片使用方式：

<img src={tsIcon} alt="" />

//背景使用方式1：

<div style={{background: `url(${tsIcon}) no-repeat`}}></div>

//背景使用方式2：

const styles = {
    test: {
        background: `url(${tsIcon}) no-repeat center`
    }
}

react組件內寫樣式

寫樣式：(對象,下滑槓變駝峯命名)

const styles = {//樣式
    MenuHeader: {
        borderBottom:'1px solid pink'
    },
};

然後render裏面綁定className

render() {
    return (
        <div style={style.MenuHeader}>
           ...
        </div>
    )
}

react動態綁定className

### setState簡寫 this.setState({ FooterNavValue })等同於this.setState({ FooterNavValue：FooterNavValue })

命名規範

在 React 中，有一個命名規範，通常會將代表事件的監聽 prop 命名爲 on[Event]，將處理事件的監聽方法命名爲 handle[Event] 這樣的格式。

this.props.children完成類似vue的slot插槽

//bannerComponent.jsx

{this.props.children}

//使用時

• 111
• 222