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:

根据定义的组件结构,React会创建一个虚拟DOM的对象,此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能够实现动态样式操作和样式的模块化管理