使用Umi构建React应用及React入门

一. umi项目初始化

## 项目初始化
tyarn init -y

## 添加umi依赖支持
tyarn add umi --dev

## 启动,并测试
umi dev

## 添加umi-plugin-react依赖支持
tyarn add umi-plugin-react --dev

## umi build 项目构建
umi build

## 新建src目录

## 在src目录下新建pages目录

## 在pages目录下新建HelloWorld.js文件, 并写入如下代码

export default () => {
  return <div>Hello World</div>
}

## 在src目录下新建config目录
## 在config目录下新建config.js并添加如下代码

// 导出一个对象, 暂时设置为空对象，后面再填充内容
export default {
  plugins: [
    ['umi-plugin-react', {
      // 暂时不启用任何功能
    }]
  ]
};

## 启动项目进行测试
umi dev

JSX 基本语法

export default () => {
  // jsx 语法
  let hi = () => "echoyu.com";
  return (
      <div>
        <div>Hello World</div>
        <div>{hi()}</div>
      </div>
  );
}

React 组件化编程

1. 组件的定义

export default () => {
  // jsx 语法
  let hi = () => "echoyu.com";
  return (
      <div>
        <div>Hello World</div>
        <div>{ hi() }</div>
      </div>
  );
}

2. 组件的引用

import React from 'react';
import Demo2 from "./Demo2";

class Show extends React.Component {

  // 1. 自定义组件
  render() {
    return (
      // 2. 组件间属性的传递
      <Demo2 name="echoyu">标签中内容</Demo2>
    );
  }
}

export default Show;

3. 组件间属性的传递

import React from 'react';

class Demo2 extends React.Component {

  render() {
    return (
      <div>我的第一个React 组件, name = { this.props.name }, 内容 = { this.props.children }</div>
    );
  }
}

export default Demo2;

React 组件状态

每一个组件都有一个状态，其保存在this.state中，当状态值发生变化时，React框架会自动调用render()方法，重新渲染页面。 其中，要注意两点

1. this.state值的设置要在构造参数中完成
2. 要修改this.state的值, 需要调用this.setState()完成, 不能直接对this.state进行修改。

import React from 'react';

class List extends React.Component {

  constructor(props) { // 构造函数中必须要props参数
    super(props); // 调用父类的构造方法
    this.state = { // 初始化this.state
        dataList: [1, 2, 3]
    }
  }
  render() {
    return (
      <div>
        <ul>
        {
            // 遍历值
            this.state.dataList.map((value, index) => {
              return <li key={index}>{value}</li>
            })
          }
        </ul>
        <button onClick={
          () => { // 1. 为按钮添加点击事件
            let newArr = this.state.dataList;
            newArr.push(newArr.length + 1);
            this.setState({ // 2. 更新状态值
              dataList: newArr
            })
          }
        }>
          点击添加
        </button>
      </div>
    );
  }

}

export default List;

React 组件生命周期

import React from 'react'; // 第一步 导入React

class LifeCycle extends React.Component {

  constructor(props) {
    super(props);
    // 构造方法
    console.log("constructor()");
  }

  componentDidMount() {
    // 组件挂载后调用
    console.log("componentDidMount()");
  }

  componentWillUnmount() {
    // 在组件从DOM中移除之前立刻被调用.
    console.log("componentWillUnmount()");
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // 在组件完成更新后立即调用. 在初始化时不会被调用。
    console.log("componentDidUpdate()");
  }

  shouldComponentUpdate(nextProps, nextState, nextContext) {
    // 每当this.props或this.state有变化, 在render方法执行之前, 就会调用这个方法。
    // 该方法返回一个布尔值, 表示是否应该继续执行render方法, 即如果返回false, 就不会更新
    // 组件挂载时, render方法的第一次执行, 不会调用这个方法
    console.log("shouldComponentUpdate()");
    return true;
  }

  render() {
    return (
        <div>
          <h1>React Life Cycle!</h1>
        </div>
    )
  }
}

export default LifeCycle;