React的引入、條件判斷與循環

React的引入

react的引入有三種方法

1. CDN引入

從CDN引入react須要不像vue只須要引入vue.min.js或者vue.runtime.min.js便可

react須要引入react.umd.min.js以及react-dom.umd.min.js

咱們在BootCDN等網站上能夠發現，有cjs以及umd兩種版本的react，那麼他們究竟有什麼區別呢？

• cjs

cjs全稱CommonJS，是Node.js支持的模塊規範

• umd

umd是統一模塊定義，兼容各類模塊規範(含瀏覽器)

因此，咱們應該優先使用umd

2. webpack

咱們也能夠經過webpack引入react，可是須要本身配置，比較麻煩

3. create-react-app

yarn global add create-react-app
//相似於vue-cli

create-react-app 項目名

yarn start
//開啓瀏覽器預覽
複製代碼

---

react 元素的建立

在react中，咱們須要使用React.createElement來建立元素,他接受三個參數

第一個參數爲tagName

第二個參數爲一個對象，裏面寫屬性

第三個參數爲一個數組，裏面能夠寫子屬性

let n = '我是n'
const App = () => {
  return (
    React.createElement('div', {className: 'el'}, [
      n,
      <hr/>,
      <button> btn </button>
    ])
  )
}

const render = () => {
  ReactDOM.render(<App/>, document.querySelector('#root'))
}

render()
複製代碼

咱們能夠看到，上面的代碼將App 與 render 寫成了函數，由於若是不寫成函數，那麼若是後續n發生改變，視圖也不會進行更新，只有將其寫成函數，並在n改變時從新render，視圖纔會改變。

---

JSX

上面的代碼有一個問題，那就是很是醜，很難看懂它到底寫了什麼。

Vue 使用了 vue-loader 解決了 不使用編譯器時，代碼繁雜的問題。react也提供了一個jsx-loader方案，而且，jsx-laoder以及集成到了babel-loader中，咱們在js文件中寫jsx代碼，就能自動轉義，而不須要像vue那樣使用一個vue文件。

jsx 語法：

• 在聲明class時，須要使用className
• 標籤中的 js代碼 變量 對象 都須要使用{}包起來
• return 時 ，後面加上一個()

---

條件判斷

在vue中，當咱們須要進行條件判斷時，咱們可使用v-if來寫代碼，但在vue中，咱們能夠像寫原生js同樣，進行條件判斷。

let n = 1
const App = () => {
  return (
    <section>
      <div> {n}</div>
      <button onClick={() => {
        n += 1;
        render()
      }}>+1
      </button>
        {n % 2 === 0 ? <div>n是偶數</div> : <div>n是奇數</div>}
    </section>
  )
}

const render = () => {
  ReactDOM.render(<App/>, document.querySelector('#root'))
}

render()
複製代碼

---

循環

在vue中，若是須要使用循環，就要使用v-for，但在react中，你仍然能夠像寫原生js那樣寫

let users = [{name: 'Tom'}, {name: 'Jack'}, {name: 'John'}]
const App = () => {
  return (
    <ul>
      {users.map((u, indexNumber) => {
        return (
          <li key={indexNumber}>
            姓名: {u.name}————下標：{indexNumber}
          </li>)
      })}
    </ul>
  )
}

const render = () => {
  ReactDOM.render(<App/>, document.querySelector('#root'))
}

render()
複製代碼