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

posted @ 2020-01-20 15:01  zhaogaojian  阅读(967)  评论(0编辑  收藏  举报