安装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
- 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实现动画
//第一步，引用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;
}
网友评论