React准备

React 准备

初始化项目

安装create-react-app

打开终端执行: npm i create-react-app -g
执行create-react-app AwesomeProject
执行yarn start

在vscode中添加chrome调试工具

在vscode的扩展中搜索并安装Debugger for Chrome
在调试窗口(ctrl+shift+d)配置, 选择"添加配置"

写配置文件(launch.json)

eg:

{
  "type": "chrome",
  "request": "launch",
  "name": "Chrome",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceRoot}/src",
  "userDataDir": "${workspaceRoot}/.vscode/chrome",
  "sourceMapPathOverrides": {
    "webpack:///src/*": "${webRoot}/*"
  }
}

在调试窗口点击,开始调试.(需要先在终端执行yarn start)

知识储备

ES6语法

导入其他组件/对象/方法import与暴露组件/对象/方法export

常见用法:

从MyText.js中暴露一个组件

import React, { Component } from 'react'

export default class MyText extends Component {

}

在MyText.js同级目录下的一个文件中导入该组件

//说明: 
//路径: './'表示同级目录下的文件
//省略后缀: 后缀为.js的可以省略不写
import MyText from './MyText'

从util.js工具方法中暴露一个对象

//形式1
export function func1() {
  
}

export function func2() {
  
}

//形式2 效果等同于 形式1

function func1() {
  
}

function func2() {
  
}

export default {
  func1,
  func2
}

从util.js中导入对象或指定方法


//导入整个对象
import util from './../util'

util.func1();
util.func2();

//导入指定方法
import {func1} from './../util'

func1();

箭头函数(参数) => {函数体}

几个特性:
1. 无this
2. 无arguments
3. 不可作为构造函数

Promise

主要用于美化异步操作代码, 使其能够有同步代码的阅读体验, 避免出现地狱回调.

有三种状态:

1. padding, 等待结果
2. reject, 拒绝/错误
3. resolve, 成功

eg:

let func1 = () => {
  let p = new Promise((resolve, reject) => {
    setTimeout(() => {
      if (true) {
        resolve('success');
      } else {
        reject();
      }
    }, 500);
  });
  return p;
};
let func2 = () => {
  let p = new Promise((resolve, reject) => {
    setTimeout(() => {
      if (false) {
        resolve();
      } else {
        reject('error');
      }
    }, 500);
  });
  return p;
};

func
.then((data) => {

  //500ms后执行
  console.log(data);
  return func2();
})
.then(() => {

  //未执行
  console.log('1');
}, (errorData) => {
  console.log(errorData);
})
.catch((errMsg) => {

  //统一处理error
  console.error(errMsg);
});

JSX语法

内部使用插值表达式, (关于表达式和语句的区别)

eg:

function greeting(text) {
  return <h1>{ text }</h1>
}

//单括号内部使用js表达式,例如:
/*
{ number + 1 }
{ ok ? 'YES' : 'NO' }
{ message.split('').reverse().join('') }
*/

它本身也是表达式的一种, 和JavaScript语句一起使用即可.

特殊的属性写法

eg:

class => className

const el1 = (
  <div className="yourName">
    <h1>hello</h1>
    <b>world</b>
  </div>
);

src="example.jpg" => src={yourPath}, typeof yourPath is String

const yourPath = 'example.jpg';
const el2 = {
  <img src={yourPath} />
};

//or
const el3 = {
  <img src="example.jpg" /> //传统html中属性的写法
};

//error
const el4 = {
  <img src="yourPath" />  //路径为yourPath, 而不是example.jpg
};

注意

在JavaScript语句中直接套用html标签或者自定义组件等同于使用React.createElement()方法, 当然这需要使用babel对其进行编译.

DOM element 与 React element
1. DOM element为传统的html标签.
2. React element是一个简单的对象(原文: a plain Object), 由React.createElement()方法得到, 并且所有的React element构成React DOM.
  
  eg:
```
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);
```
3. 使用ReactDOM.render()方法可以在DOM中注入React DOM.
  纯React的项目一般来说只需要一个root DOM.而在一个已有的项目中, 你可以提供多个dom节点, 作为注入React DOM的入口.

扩展

create-react-app默认支持的方法有:

"..."对象展开符

eg:

let obj1 = {
  name: 'zgatry',
  address: '杭州',
  age: 18
};
let obj2 = {
  ...obj1,
  age: 23
};
console.log(obj2);
/*
{
  name: 'zgatry',
  address: '杭州',
  age: 23
}
*/

Object.assign()方法