React

安装react脚手架工具create-react-app并创建项目

npm install -g create-react-app  //全局安装create-react-app

//使用create-react-app创建项目my-app
create-react-app my-app

//cd进入my-app文件夹
cd my-app

yarn start //运行my-app项目

yarn build  //编译

//注意，使用create-react-app创建项目的node版本高于6.0

react配置less

• 安装less、less-loader

yarn add less less-loader

• 暴露package.json

yarn eject

这里运行yarn eject出错了,是因为git地址有问题,解决方法

git add .
git commit -am "Save before ejecting"
npm run eject

• 更改暴露出来的config下面的webpack.config.dev.js和webpack.config.prod.js文件

//先修改webpack.config.dev.js文件的两个地方

//第一个地方添加以下代码
const lessRegex = /\.(lcss|less)$/;
const lessModuleRegex = /\.module\.(lcss|less)$/;

//第二个地方添加以下代码
          {
            test: lessRegex,
            exclude: lessModuleRegex,
            use: getStyleLoaders({ importLoaders: 2 }, 'less-loader'),
          },
          {
            test: lessModuleRegex,
            use: getStyleLoaders(
              {
                importLoaders: 2,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent,
              },
              'less-loader'
            ),
          },

//webpack.config.prod.js文件修改在相同的地方添加代码

• 也可以不用暴露webpack就设置less，参照文档

了解react

• 声明式开发
  面向数据编程，节约大量DOM操作。
• 可以与其他框架并存
• 组件化开发
• 单项数据流
  父组件可以向子组件传值，但是子组件一定不能直接修改这个值。
• 视图层框架
  只解决数据和页面渲染问题。
• 函数式编程
  优点：维护容易、给前端自动化测试带来了很大的便捷性。

PropTypes、DefaultProps

• 指这个组件能接收父组件传递的参数，使用PropTypes对参数的属性做校验参考链接
• 当父组件没有向子组件传递参数时，子组件可以使用使用DefaultProps定义参数以及参数属性

JSX语法注意点

• div属性class改为className
• label属性for改为htmlFor

react生命周期

• 生命周期函数指在某一时刻组件会自动执行的函数

• react生命周期函数

  
  

render

componentWillMount  //在组件即将被挂载到页面的时候自动执行，在render之前

componentDidMount  //在组件即将被挂载到页面的之后自动执行，在render之后

shouldComponentUpdate  //在组件更新之前自动执行，一般会返回true
shouldComponentUpdate () {
    return true;
}

componentWillUpdate  //组件被更新之前会自动执行，但是它在shouldComponentUpdate返回true之后执行，如果返回false，不会执行

componentDidUpdate  //组件更新完成后执行

state、props和render函数

• state

//constructor函数初始化state
constructor（props）{
    super(props);
    this.state = {
        list: [],
    };
}

//setState函数更改state数据
this.setState(() => ({
    list: [1,2,3],
}))
//此处可以返回一个对象，需要传递参数时也可以使用函数

• props
  当父组件向子组件传递参数时，子组件可以使用this.props接收
• render函数
  当组件的state或props发生改变时，render函数就会被重新执行

react虚拟DOM

react根据state（数据）、JSX语法（模板）构成页面，流程如下

JSX->createElement->JS对象(虚拟DOM)->真实DOM

1.初始化state 数据
2.JSX 使用模板
3.数据 + 模板，生成虚拟DOM（虚拟DOM就是一个JS对象，用它来描述真实DOM）
4.用虚拟DOM的结构生成真实DOM

5. state发生改变
   6.数据 + 模板，生成新的虚拟DOM
   7.比较原始虚拟DOM和新的虚拟DOM的区别
   8.直接操作DOM，改变需要修改的内容

真实DOM、虚拟DOM

• 真实DOM-性能消耗大
  react中创建真实DOM会利用DOM的api创建，如createElement()、appendChild()、removeChild()、insertBefore()、replaceChild()。
• 虚拟DOM-真实DOM-性能消耗大
  而创建虚拟DOM就是创建JS对象，如：

<div id='root'><span>hello world</span></div>
会被创建成['div',{id:'root},['span',{},'hello world']

根据state或者props的状态生成不同的虚拟DOM，对比前后虚拟DOM的差别再去创建真实DOM，从而减少性能消耗。

• 虚拟DOM优点
  提高性能、使跨端应用得以实现，React Native。
• 虚拟DOM Diff算法即（原始虚拟DOM和新生成虚拟DOM）state变化前后生成的JS对象的比对
  引起页面数据变化的state或者props，而子组件props也是基于父组件的state改变的额，归根结底还是state的变化引起的，state的变化调用了 setState函数，setState是一个异步函数，如果调用setState的时间比较集中，虚拟DOM Difff算法会把临近几次调用的setState生成一个虚拟DOM树，然后逐层比较生成的虚拟DOM，如果在第一层就出现差异会删除下面节点，重新生成一个新的虚拟DOM，这里要注意key的取值，不能轻易使用map循环里的index做key值。

React中ref的使用

ref在react里可以直接获取DOM元素，写法如下：

<ul ref={(ul) => this.ul = ul} />
注意：在setState之后获取DOM元素需要写在setState函数的第二个参数里，因为setState函数是一个异步函数，如下
handleButtonOclick(){
        this.setState((prevState) =>({
            list:[...prevState.list,prevState.inputValue],
            inputValue:''
        }),() =>{
            console.log(this.ul.querySelectorAll('div').length)
        })
    }  

react中实现CSS过渡动画

transition: all 1s ease-in;  //transition css3过渡属性

//css动画 通过定义@keyframes属性设置动画
.show {
    animation: show-item 2s ease-in forwards; //定义入场动画名称show-item forwards关键字能保持最后一帧动画状态
}

.hide {
    animation: hide-item 2s ease-in forwards; //定义出场动画名称show-item forwards关键字能保持最后一帧动画状态
}
//入场动画
@keyframes show-item {
    0% {
        opacity: 0;
        color: red;
    }
    50% {
        opacity: 0.5;
        color: green;
    }
    100% {
        opacity: 1;
        color: blue;
    }
}
//出场动画
@keyframes hide-item {
    0% {
        opacity: 1;
        color: red;
    }
    50% {
        opacity: 0.5;
        color: green;
    }
    100% {
        opacity: 0;
        color: blue;
    }
}

使用react-transition-group实现动画

教程GitHub地址

//第一步，引用CSSTransition
import { CSSTransition } from 'react-transition-group';

//第二步，将要做变动的元素放在CSSTransition组件内，并配置CSSTransition 属性
//in、timeout、classNames、unmountOnExit  这些事基本属性，如果想要实现其他效果还可以调用其它钩子函数，如onEnter()、onEntering()等
 <CSSTransition
           in={this.state.show}  //执行入场动作的状态
           timeout={1000}  //动画执行时间
           classNames='fade' //设置css样式前置名称，注意是classNames
           unmountOnExit  //动画执行完以后影藏DOM节点
>
        <div>hello</div>
</CSSTransition>

//第三步，编写css样式
//fade为CSSTransition中定义的classNames属性
.fade-enter {
    opacity: 0;
}

.fade-enter-active {
    opacity: 1;
    transition: opacity 1s ease-in;
}

.fade-enter-done {
    opacity: 1;
}

.fade-exit {
    opacity: 1;
}

.fade-exit-active {
    opacity: 0;
    transition: opacity 1s ease-in;
}

.fade-exit-done {
    opacity: 0;
}

参考资料

react官网文档
教程
教程GitHub代码地址