• 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

  • 相关阅读:
    poj 1733 Parity game
    poj 1456 Supermarket
    bzoj 1304 [CQOI 2009] 叶子的染色
    51Nod 1667 概率好题
    2015年阿里巴巴校招研发工程师在线笔试题汇总
    从字符串常量起说内存分配
    字符串笔面试题
    排序算法(4)-线性时间排序
    华为2015校园招聘机试
    笔画宽度变化(C++和matlab算法)
  • 原文地址:https://www.cnblogs.com/zhaogaojian/p/12218045.html
一二三 - 开发者的网上家园