AntDesign(React)學習-3 React基礎

前面項目已經建起來了，但是沒有React基礎怎么辦，從頭學習，這個項目使用的是基於React16.X版本的幾種技術集成，那么我們就從網上找一些相關的資料進行研究，我的習慣是用到哪學到哪。

一、先看一些基礎示例
1、render用法

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);

以上代碼將一個 h1 標題，插入 id="example" 節點中。

2、創建組件

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>現在是 {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('example')
  );
}

3、React JSX

const element = <h1>Hello, world!</h1>;

注意不帶單引號

4、React事件

<button onclick="activateLasers()">
  激活按鈕
</button>

<button onClick={activateLasers}>
  激活按鈕
</button>

二、登錄代碼在下面圖示位置,先看看代碼里都有哪些陌生東西

打開index.tsx文件，查看代碼 

1、頁面過渡效果

 

import { connect } from 'dva';

 

 

 詳細介紹：https://www.jianshu.com/p/61fe7a57fad4

這是dva中的一個特效

2、dva是什么？

dva 是 React 應用框架，將React-Router + Redux + Redux-saga三個 React 工具庫包裝在一起，簡化了 API，讓開發 React 應用更加方便和快捷。

簡單理解：
dva = React-Router + Redux + Redux-saga

鏈接：https://www.jianshu.com/p/d6c097ca6d8a

3、Dispatch 

import { Dispatch, AnyAction } from 'redux';

const handleSubmit = (values: LoginParamsType) => {
    const { dispatch } = props;
    dispatch({
      type: 'login/login',
      payload: { ...values, type },
    });
  };

4、什么是Redux

Redux對於JavaScript應用而言是一個可預測狀態的容器。換言之，它是一個應用數據流框架，而不是傳統的像underscore.js或者AngularJs那樣的庫或者框架。

Redux最主要是用作應用狀態的管理。簡言之，Redux用一個單獨的常量狀態樹（對象）保存這一整個應用的狀態，這個對象不能直接被改變。當一些數據變化了，一個新的對象就會被創建（使用actions和reducers）。

以上內容來自百科

5、結構圖如下

 

上面圖片引自：https://blog.csdn.net/weixin_44801180/article/details/92776734

 6、link

import Link from 'umi/link';
<Link className={styles.register} to="/user/register">
            注冊賬戶
 </Link>

umi/link示例

 

 umijs詳細線上文檔

https://umijs.org/zh/guide/navigate-between-pages.html#聲明式

7、其他的一篇比較淺顯易懂的文章

https://www.cnblogs.com/rong88/p/11664496.html

這篇文章作者總結的好：項目的開發流程一般是從設計 model state 開始進行抽象數據，完成 component 后，將組件和model 建立關聯，通過 dispatch 一個 action ，在 reducer 中更新數據完成數據同步處理；

當需要從服務器獲取數據時，通過 Effects 數據異步處理，然后調用 Reducer 更新全局 state 。

 

8、effects是什么

 

請查看Redux-saga，下面講解比較詳細點的。

https://blog.csdn.net/weixin_34337381/article/details/87953740

https://juejin.im/post/5d00ee76f265da1bba58fd6a