React技术文档(一)
安装
- 全局安装react脚手架
npm i -g create-react-app
- 查看react安装版本
create-react-app -V
- 进入目标文件夹下创建react项目
create-react-app myReact
- 启动项目 注意:启动react需要关闭浏览器的react开发者工具
npm start
- 解决脚手架安装较慢情况
npm i nrm
nrm ls
nrm use taobao
- 解决安装脚手架后找不到版本号问题
1.查看系统配置环境变量
2.网络问题---npm 默认镜像为npm源,需切换至taobao镜像
初步认识
- reacts17版本开始所使用的语言为jsx,jsx语言会自动通过bable语言将其转化为js语言以供浏览器识别,更便于dom节点的渲染操做
-- jsx语法
import ReactDOM from "react-dom";
ReactDOM.render(<div class='wrapper'>
<ul>
<li>张三丰</li>
<li>李老四</li>
<li>王老五</li>
<li>邹老六</li>
</ul>
<div class='text'></div>
</div>,document.querySelector('#root'))
-- 浏览器通过bable解析jsx语言之后的语言格式
import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(React.createElement('div',{class:'content'},'111'),document.querySelector('.text'))
-- jsx相较于js语法更加简洁方便,省去引入React文件的步骤,更有利于开发使用
组件的创建
类组件
在src目录下新建js文件
import React from 'react'
class App extends React.Component {
render(){
return <div>222</div>
}
}
export default App
将组件文件导入src目录下的index.js文件中,并使用组件
import App from './01-base/01-class组件'
ReactDOM.render(<App />,document.querySelector('.text'))
函数组件
在src目录下新建js文件
function App(){
return(
<div>function 组件</div>
)
}
export default App
将组件文件导入src目录下的index.js文件中,并使用组件
import AppFun from './01-base/02-function组件'
ReactDOM.render(<AppFun />,document.querySelector('.text'))
注意:为什么<App />组件在浏览器中被渲染,这期间发生了什么?
1.获取渲染目标节点:
根据ReactDOM.render()执行函数入参所知,通过document.querySelector('.text')获得DOM节点,将此节点作为渲染目标
2.创建虚拟DOM:
根据定义的组件结构
3.虚拟DOM转真实DOM:
通过虚拟DOM树形创建真实DOM节点
4.真实DOM挂载在目标节点上:
并将其插入到之前获取到的渲染节点中,并显示在浏览器中
5.组件生命周期事件触发:
当真实的DOM节点被渲染在浏览器中,React将会自动触发相应的生命周期事件方法
6.更新机制:
当组件状态或其属性发生变化时,React会进行重新渲染过程,生成新的DOM虚拟节点树形对象,再通过内置diff算法进行比较,将发生变化的部分以打补丁的形式重新渲染在浏览器
整个的过程中React高效的更新DOM,实现组件的动态渲染过程
组件的嵌套
通过父组件与子组件嵌套关系实现组件式嵌套开发
import React, { Component } from 'react'
class Child extends Component{
render(){
return(<div>child</div>)
}
}
class NavBar extends Component{
render(){
return(
<div><Child></Child></div>
)
}
}
function Swiper(){
return(<div>Swiper</div>)
}
const Tabbar=()=>{
return(<div>Tabbar</div>)
}
// 箭头函数的简写形式
// const Tabbar=()=><div>Tabbar</div>
export default class App extends Component {
render() {
return (
<div>
<NavBar></NavBar>
<Swiper></Swiper>
<Tabbar></Tabbar>
</div>
)
}
}
其中App组件中包含三个子组件,
推荐使用箭头函数形式进行定义,起因于箭头函数的this指向源于外部函数,更加便于我们使用this全局
在
组件的样式
import React, { Component } from 'react'
import './css/01-css.css'
export default class App extends Component {
render() {
var name='yuge'
var obj={
backgroundColor:'red'
}
return (
<div>
<div style={obj}>{20+20}-{name}</div>
<div className='active'>aa</div>
</div>
)
}
}
.active{
background:#ccc;
}
效果展示：
注意:为什么css文件在js可以被编译解析呢?
由于前端项目react采用模块化的方法,webPack通过打包处理前端项目源码时,构建工具通过加载器识别并解析各类文件
具体的css文件解析过程:
-
在webPack中存在多种构建工具的加载器,各类加载器具备不同的功能,当遇到css文件时,通过css加载器随其进行解析处理
-
css加载器会先将css文件解析为样式对象或css字符串,再将其打包进最终的js文件中,注意这里为什么是最终,因为我们在react中的js文件所写为jsx语法,也是需要bable解析为js文件的
-
在js解析完毕并加载到浏览器中后,之前被解析的样式对象或css字符串会找到相应的元素并进行样式渲染
这样做的目的:将js和css文件一起进行打包可以更好的管理依赖关系,优化优化加载器的速度的同时提高了项目的可维护性;其次通过在js中去编写css能够实现动态样式操作和样式的模块化管理