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、map
	const map = new Map([
		[‘map1’,’value1’],[‘map2’,’value2’]
	])
	
	可以接受set和map
	方法：
	map.set(key,value);//添加
	map.clear();//清空
	map.delete(key);//删除指定key
	map.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.Component
    render() {      //重写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'           //导入react

class hw4 extends React.Component{   //继承React.Component

	constructor(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>

                <button
                    onClick={()=>{
                        let newFlag = this.state.flag + 1;
                        let newDataList = [...this.state.dataList,newFlag]
                        this.setState({
                            dataList : newDataList,
                            flag : newFlag
                        })
                }}>添加</button>
            </div>
        );
    }
}

export default hw4;   //导出该类