reactJS入门学习

一、基础知识

1、var 定义的局部变脸可以衍生为全局变量，，引入let
2、const 定义的变量不能被修该，相当于final
3、 includes 相当于contains,包含的意思
startsWith 是否以某个字符串开头
endsWith 是否已某个字符串结尾
4、let s = ;可以原样打印
5、箭头函数

5.1
var print = function(obj){console.log(1);
}
==>var print = obj =>console.log(1);

5.2
var print = function(a,b){return a+b;
}
==>var print = (a,b)=>a+b;

5.3 没有参数时要用（）占位，代表参数部分

5.4 业务代码不至一行可以这么写：
var print = (a,b)=>{console.log(a);console.log(b);
}

6、新增函数

6.1、map()  :接受一个函数后，将原数组中的元素用这个函数处理后放入新的数组返回。例：将一个字符串数组转换为一个int数组
let arr = [“66”,”54”,”99”];
let newArr = arr.map(s =>parseInt(s))  //var s = s=>parseInt(s);
console.log(newArr)

6.2、reduce(a,b)

7、扩展运算符

spread  由…代替：将一个叔祖转为用逗号分割的参数序列
例：console.log(…[1,2,3])  //1 2 3数组合并：console.log([…[1,2,3],…[5,9,8]])  //[1,2,3,5,9,8]字符串转数组：console.log(…’hello’)      //[‘h’,’e’,’l’,’l’,’o’]

8、Promise

简单说就是一个容器，存储着某个未来才能结束的事件（通常是一个异步操作）的结果，从语法上说，promise是一个对象，可以获取异步操作的消息，promise提供统一的api,各种异步操作都可以用同样的方法进行处理。
const promise = new Promise(function(resolve,reject){//执行异步操作//if(操作成功){resolve(value)//代表将返回成功的结果}else{reject(error)//代表返回失败结果}
})
如果我们想要等异步结束之后做一些事情，可以通过promise的then方法来实现：
promise.then(function(value){//异步执行完的回调
})如果想执行失败后的事件，可以这样写：
promise.then(function(value){//异步执行完的回调
}).catch(function(error){//异步执行失败的处理
})

9、Set 和Map

9.1、set和java中的set非常相似，元素不可重复，否则会被忽略。let set = new Set();set.add(1);let set2 = new Set([1,2,3,4,5])   //接收数组//方法：set.add(1);//添加set.clear();//清空set.delete(1);//指定删除元素set.has(1);//判断是否存在该元素set.forEach(function(s){console.log(s)})//遍历set.size;//元素个数

9.2、mapconst map = new Map([[‘map1’,’value1’],[‘map2’,’value2’]])可以接受set和map方法：map.set(key,value);//添加map.clear();//清空map.delete(key);//删除指定keymap.has(key);//判断key是否存在map.forEach(function(key,value){})//遍历map.size;//个数map.values();//获取value迭代器map.keys();//获取key迭代器map.entries();//获取entry迭代器for(let key of map.keys()){console.log(key)}

10、Generator函数

异步编程解决方案，语法行为与传统函数完全不一样。function* hello(){yield “hello”;yield “world”;return “down”;}

二、部署安装

1、安装node.js
安装结束后通过 node –v查询版本号
2、安装yarn
npm i yarn tyarn –g -g 代表全局安装

tyarn –v 查看版本

3、安装umi
tyarn global add umi
umi
如果出现umi “不是内部或外部命令”…，解决方式如下：
3.1、更换高版本node.js >10
3.2、tyarn global bin 将获取到的global地址添加到环境变量
4、新建web项目
4.1、初始化：tyarn init –y
4.2、添加依赖：tyarn add umi --dev
4.3、第一个hello world

tyarn add umi-plugin-react --dev 安装插件
umi build 编译
umi dev 启动
遇到错误点：https://blog.csdn.net/qq_38763540/article/details/104774956

4.4、组件

import React from 'react'           //导入react
import HellWorld from './helloworld2'   //导入自定义组件
import HellWorld2 from './helloworld'   //导入自定义组件class hw extends React.Component{   //继承React.Componentrender() {      //重写render方法return <HellWorld2/>;   //JSX语法}
}
export default hw;   //导出该类

4.5、传递参数
属性传递<HellWorld name="lfq">beijing</HellWorld>
内容传递<HellWorld name="lfq">beijing</HellWorld>

接收方式：
接受属性：<dev> name={this.props.name},address={this.props.children}</dev>
接受内容：<dev> name={this.props.name},address={this.props.children}</dev

4.6、组件的状态

import React from 'react'           //导入reactclass hw4 extends React.Component{   //继承React.Componentconstructor(props){super(props);console.log("构造方法~constructor")this.state={dataList : [1,2,3,4],flag : 10}}componentDidMount() {console.log("组件挂载后调用~componentDidMount");}componentWillUnmount() {console.log("组件从DOM中移除后调用~componentWillUnmount")}componentDidUpdate() {console.log("组件完成更新后调用~componentDidUpdate")}shouldComponentUpdate(nextProps, nextState) {console.log("this.state或者this.props更新~shouldComponentUpdate")}render() {      //重写render方法return (<div><ul>{this.state.dataList.map(((value, index) => {return <li key={index}>{value}</li>}))}</ul><buttononClick={()=>{let newFlag = this.state.flag + 1;let newDataList = [...this.state.dataList,newFlag]this.setState({dataList : newDataList,flag : newFlag})}}>添加</button></div>);}
}export default hw4;   //导出该类