再次入門 react ，不同的收穫

時間 2020-06-03

標籤再次入門 react 不同收穫欄目 React 简体版

原文原文鏈接

`react`

更適合入門 react 的學習，由於本人沒有正兒八經的 react 的項目經驗。以前由於 react 太難了從入門到放棄，後來由於疫情期間參與公司 react+ts 直播項目，打醬油再次入門 react，隨着公司技術轉向 react 開始入門 react。javascript

對比 vue ,react 更加接近原生的用法。長時間的 vue 一把嗦，都忘記原生的要怎麼寫了。react 可以在 vue 和 js 找出類似點。因此入門很簡單，放棄更容易，秒秒鐘的事。html

JSX

寫法：和寫原生的 html 差很少，由於 JSX 語法上更接近 JavaScript 而不是 HTML，因此 React DOM 使用 camelCase（小駝峯命名）來定義屬性的名稱，而不使用 HTML 屬性名稱的命名約定（例如，JSX 裏的 class 變成了 className，而 tabindex 則變爲 tabIndex。）用到了變量就用 {} 把變量包起來。每一個 JSX 元素都是調用 React.createElement() 的語法糖。vue

例如：java

const element = (
  <>
    <h1>Hello!{name}</h1>
    <h2>Good to see you here.</h2>
  </>
);
複製代碼

<></> 這裏指的是一個空標籤，由於只能有一個「根」 DOM 節點，Babel 會把 JSX 轉譯成一個名爲 React.createElement() 函數調用react

元素渲染

ReactDOM.render()，方法裏面傳入一個要渲染的元素和一個須要掛載到某一個 DOM 節點上的 id數組

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

React 元素是不可變對象。一旦被建立，你就沒法更改它的子元素或者屬性。更新 UI 惟一的方式是建立一個全新的元素，並將其傳入 ReactDOM.render()。bash

React 應用只會調用一次 ReactDOM.render(),頁面渲染以後，若是咱們想要修改 ui，就須要把代碼封裝到有狀態組件中閉包

條件處理

和 javascript 上面的差很少模塊化

// 三目運算
function Greeting() {
  return (
    <div>
    {
      isLoggedIn? <UserGreeting />:<GuestGreeting />
    }
    </div>
  )
}
// && 使用
function Greeting() {
  return (
    <div>
    {
      isLoggedIn&&isSunseekers? <UserGreeting />:<GuestGreeting />
    }
    </div>
  )
}
複製代碼

列表 && key

循環用列表渲染用 map ，寫法和 javascript ，和 vue 同樣要指定惟一的 key。變量用 {} 包裹函數

function NumberList(){
  const numbersList = []
  return (
    <ul>
    {
      numbersList.map(item=>(
        <li key={item}>{item}</li>
      ))
    }
    </ul>
  )
}
複製代碼

事件處理

和原生的 js 差很少，區別在於 React 事件的命名採用小駝峯式（camelCase），而不是純小寫。使用 JSX 語法時你須要傳入一個函數做爲事件處理函數（是一個變量），而不是一個字符串

<button onClick={activateLasers}>
  Activate Lasers
</button>
複製代碼

給事件傳參數通常經過箭頭函數

<button onClick={() => Delete(item)}>Delete Row</button>
複製代碼

還能夠是 bind 的方式，我不喜歡用,我以爲箭頭函數方便

354- 一文吃透 React 事件機制原理

插槽

有些組件沒法提早知曉它們子組件的具體內容，好比通用容器的展現好比說 Loading Dialog Scroll 等等，這時候咱們就可使用組合。這個就像 vue 裏面的插槽同樣，父組件給子組件傳遞一段 JSX 或者 DOM 標籤

// 子組件
function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children} // 這裏就是插槽，內容由父組件控制，由 props.children 接受到內容
    </div>
  );
}
// 父組件
function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
    // 傳遞給子組件的一段內容，做爲children 經過prop 傳遞
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
    </FancyBorder>
  );
}
複製代碼

經過 props.children 是一種傳遞的方式，我還能夠也是能夠直接使用 props 屬性進行傳值的，傳值的方式和是以前同樣直接在組件上面傳

function App() {
  return (
    <SplitPane
      left={
        <Contacts /> // 給子組件傳遞一個 left 屬性，他的值是一個組件
      }
      right={
        <Chat />
      } />
  );
}
複製代碼

enmmmmm ，這麼看的話，其實就是 props 傳值的類型能夠是任意的，基本類型，引用類型，函數，組件

函數組件

由於我我的在項目中習慣使用函數組件一把嗦，關於 class 組件我就不介紹了。新版中引入了 hook，讓函數組件也可有有生命週期，使用起來更加方便。

函數式組件的首字母要大寫，小寫的函數，不會被看成組件渲染的。函數組件能夠接受一個參數 props 表示傳進來的數據（全部傳進來的數據都用 props 包裹起來了），不限制類型，能夠是函數，對象，數組...，有一個返回值，能夠被 react 識別並渲染，一般是 jsx 形式。

函數組件是都決不能修改自身的 props，是一個「純函數」，相同的輸入必定是相同的輸出

function Avatar(props) {
  return (
    <img className="Avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}
    />
  );
}
複製代碼

數據是向下流動的,不論是父組件或是子組件都沒法知道某個組件是有狀態的仍是無狀態的，而且它們也並不關心它是函數組件仍是 class 組件。

若是項目是 react+ts 結合的話，可使用 FC 類型來聲明，FC 是 FunctionComponent 的簡寫, 這個類型定義了默認的 props(如 children)以及一些靜態屬性(如 defaultProps)

import React from 'react';
/**
 * 聲明Props類型
 */
export interface MyComponentProps {
  className: string;
  style: React.CSSProperties;
}
export const MyComponent:FC<MyComponentProps> = props=>{
  return <div>hello react</div>;
}
export const MyComponent1:FC<MyComponentProps> = {className,style}=>{ // 參數結構
  return <div>hello react</div>;
}
複製代碼

至關於

import React from 'react';
/**
 * 聲明Props類型
 */
export interface MyComponentProps {
  className: string;
  style: React.CSSProperties;
}
export function MyComponent(props:MyComponentProps){
  return <div>hello react</div>;
}
複製代碼

FC 類型來聲明和直接用函數有什麼區別呢？

In most cases it makes very little difference which syntax is used, but you may prefer the more explicit nature of React.FunctionComponent. 最後一句話，大多數狀況下普通函數的形式就夠了，若是想要更精準的 TypeScript 類型推斷，就用 React.FC

具體使用什麼，能夠看我的習慣和團隊代碼風格。當咱們直接使用 FC 沒法知足需求，這時候就使用函數組件（具體的場景沒遇到過

函數式組件與類組件有何不一樣？ => 推薦看（裏面詳細說了 hook 陳舊值的原由和解決方案

函數式組件與類組件在線區別 demo

React 組件設計實踐總結 01 - 類型檢查

簡單說就是：函數式組件捕獲了渲染所使用的值，不會獲取到過新的數據

在 React 中 props 是不可變(immutable)的，因此他們永遠不會改變。然而，this 並且永遠是可變(mutable)的。

事實上，這就是類組件 this 存在的意義。React 自己會隨着時間的推移而改變，以便你能夠在渲染方法以及生命週期方法中獲得最新的實例

因此若是在請求已經發出的狀況下咱們的組件進行了從新渲染，this.props 將會改變。showMessage 方法從一個「過於新」的 props 中獲得了 user。這也就是常說的閉包陳舊的問題，其實並非閉包陳舊，而是它自己就是這樣的

函數式組件中想要渲染最新的值，那就在變化的時候在執行一次同樣的操做。函數式組件捕獲了渲染所使用的值這種寫法是對的。

若是你可以很好的理解函數與閉包的知識，在學習react的時候能夠看到不少不同的東西。完美的避開某些坑