React 入門（4）React+TypeScript

序言

 

設置淘寶鏡像

npm config get cache

npm config get prefix

npm config get registry

npm config set registry https://registry.npmjs.org

npm config set registry https://registry.npm.taobao.org

npm

如果沒有create-react-app命令行腳手架，可以先下載個

npm install -g create-react-app

然后我們使用其創建一個typescript項目

create-react-app my-app --tempalte typescript

進后項目，啟動

npm start

yarn

注意：建議不要放在node的文件夾里，將其放在另一個文件夾，否則會影響node安裝的全局命令使用。

yarn config set global-folder "D:\Web\Node\yarn\global"

yarn config set cache-folder "D:\Web\Node\yarn\cache"

創建項目

yarn create react-app react-typescript-app --typescript

yarn

yarn start

集成

less

https://www.cnblogs.com/lyzw-Y/p/11566631.html

webpack

yarn add webpack

ant design

yarn add antd

Redux 

yarn add redux

yarn add react-redux

yarn add redux-thunk  yarn add redux-saga

yarn add redux-logger

yarn add react-router-dom

DvaJS

 

Umi

全局安裝umi,版本是2.0.0或以上

yarn global add umi

yarn create umi

umi block list

https://pro.ant.design/docs/block

 

創建頁面

umi g page index

umi g page users

啟動本地服務器

umi dev

概念

useState

import React, { useState } from 'react'
import './App.css'
 
export default function App() {
  
  const [count, setCount] = useState(0);
  const [name, setName] = useState('Star');
  
  // 調用三次setCount便於查看更新隊列的情況
  const countPlusThree = () => {
    setCount(count+1);
    setCount(count+2);
    setCount(count+3);
  }
  return (
    <div className='App'>
      <p>{name} Has Clicked <strong>{count}</strong> Times</p>
      <button onClick={countPlusThree}>Click *3</button>
    </div>
  )
}
復制代碼

const [count, setCount] = useState(0);

const [count, setCount] = useState<number>(0)

useEffect

React Hooks+Umi+TypeScript+Dva開發體驗

組件 & Props

組件，從概念上類似於 JavaScript 函數。它接受任意的入參（即 “props”），並返回用於描述頁面展示內容的 React 元素。

函數組件與 class 組件

定義組件最簡單的方式就是編寫 JavaScript 函數：

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

該函數是一個有效的 React 組件，因為它接收唯一帶有數據的 “props”（代表屬性）對象與並返回一個 React 元素。這類組件被稱為“函數組件”，因為它本質上就是 JavaScript 函數。

你同時還可以使用 ES6 的 class 來定義組件：

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

上述兩個組件在 React 里是等效的。

展開運算符{...props}

解決屬性過多，一個個書寫麻煩的問題。

React.FC

React.FC<>的在typescript使用的一個泛型，在這個泛型里面可以使用useState，個人覺得useState挺好用的，例子如下：

const SampleModel: React.FC<{}> = () =>{   //React.FC<>為typescript使用的泛型
      const [createModalVisible, handleModalVisible] = useState<boolean>(false); 
      return{
      {/** 觸發模態框**/}
      <Button style={{fontSize:'25px'}}  onClick={()=>handleModalVisible(true)} >樣例</Button>
      {/** 模態框組件**/}
      <Model onCancel={() => handleModalVisible(false)} ModalVisible={createModalVisible} /> 
  }

React.Fragment 組件

class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    );
  }
}

生成器函數

yield關鍵字：暫停

組件類引入了復雜的編程模式，比如 render props 和高階組件。

React 團隊希望，組件不要變成復雜的容器，最好只是數據流的管道。開發者根據需要，組合管道即可。 組件的最佳寫法應該是函數，而不是類。

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

但是，這種寫法有重大限制，必須是純函數，不能包含狀態，也不支持生命周期方法，因此無法取代類。

React Hooks 的設計目的，就是加強版函數組件，完全不使用"類"，就能寫出一個全功能的組件。

 

 

資料

Create React App 中文文檔

yarn報“文件名、目錄名或卷標語法不正確”錯誤的解決方案

Redux