React基础(一)

关于React

React部分的内容包含了所有授课的思路

React的起源和发展

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

• ins是一个社交网站
• React最初的目的是为了实现一个功能： 图片上传
• React是一个团队项目 / Vue是一个个人项目
• react是第一个使用虚拟DOM前端框架
• react适合做大型企业级项目

create-react-app

• React官网提供的脚手架

面试题： 你是否了解虚拟DOM？

1. 虚拟DOM是什么？
   • 我们使用js对象模型来模拟真实DOM，那么这个对象模型就是虚拟DOM
2. 虚拟DOM为什么性能高？
   • 因为我们操作的是虚拟DOM，大大减少真实DOM操作，那么就会节省内存，降低消耗
3. 虚拟DOM工作流程[ vue/react ]
   • vue
     1. 根据模板 -> 创建VDOM[ jsx ]
     2. render函数渲染jsx -> 虚拟dom对象模型
     3. 在mounted渲染真实DOM
     4. 当data选项数据改变时
     5. 在一次生成VDOM
     6. 通过diff算法【 使用js进行同级比较 】比对生成patch补丁对象
     7. 根据patch补丁对象重新渲染真实DOM
   • React
     1. 根据模板 -> 创建VDOM[ jsx ]
     2. render函数渲染jsx -> 虚拟dom对象模型
     3. 在componentDidMount渲染真实DOM
     4. 当data发生改变时
     5. 在一次生成vdom
     6. 通过 React Filber【 React 16版本使用 】 算法进行比较，生成patch补丁对象
     7. 根据patch补丁对象重新渲染真实DOM

全局安装create-react-app

$ npm install -g create-react-app

如果不想全局安装，可以直接使用npx

$ npx create-react-app your-app	也可以实现相同的效果

创建一个项目

$ create-react-app 项目名 

React的特点和优势

1. 虚拟DOM

我们以前操作dom的方式是通过document.getElementById()的方式，这样的过程实际上是先去读取html的dom结构，将结构转换成变量，再进行操作

而reactjs定义了一套变量形式的dom模型，一切操作和换算直接在变量中，这样减少了操作真实dom，性能真实相当的高，和主流MVC框架有本质的区别，并不和dom打交道

2. 组件系统

react最核心的思想是将页面中任何一个区域或者元素都可以看做一个组件 component

那么什么是组件呢？

组件指的就是同时包含了html、css、js、image元素的聚合体

使用react开发的核心就是将页面拆分成若干个组件，并且react一个组件中同时耦合了css、js、image，这种模式整个颠覆了过去的传统的方式

3. 单向数据流

其实reactjs的核心内容就是数据绑定，所谓数据绑定指的是只要将一些服务端的数据和前端页面绑定好，开发者只关注实现业务就行了

4. JSX 语法

在vue中，我们使用render函数来构建组件的dom结构性能较高，因为省去了查找和编译模板的过程，但是在render中利用createElement创建结构的时候代码可读性较低，较为复杂，此时可以利用jsx语法来在render中创建dom，解决这个问题，但是前提是需要使用工具来编译jsx

元素与组件

import React from 'react'
import ReactDOM from 'react-dom'

const app = '<h1>欢迎进入React的世界</h1>'
ReactDOM.render(
  app,
  document.getElementById('root')
)

函数式组件（ 无状态组件 PureComponent）

import React from 'react'
import ReactDOM from 'react-dom'

const APP = (props) => <h1>欢迎进入{props.name}的世界</h1>

ReactDOM.render(
  // React组件的调用方式
  <App name="react" />,
  document.getElementById('root')
)

这样一个完整的函数式组件就定义好了。但要注意！注意！注意！组件名必须大写，否则报错。

class组件

ES6的加入让JavaScript直接支持使用class来定义一个类，react的第二种创建组件的方式就是使用的类的继承

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
  render () {
    return (
      // 注意这里得用this.props.name, 必须用this.props
      <h1>欢迎进入{this.props.name}的世界</h1>
  	)
  }
}
ocument.getElementById('root')
)

React中数据的形式

1. 属性 props
2. 状态 state

• props
  • 定义形式有两种
    • 外部传入(推荐使用)
    • 内部自己设置 - 不可更改
  • 注意
    • 属性一旦确定一般不去更改，属性是用来描述组件的特征和特性的
    • 如果想改变只能由外部传入的属性改变
  • 属性验证
    • 依靠第三方包： prop-types

9. state

• 定义形式有两种

  • 直接在类中定义

  import React, { Component } from 'react'
  import ReactDOM from 'react-dom'
  
  class App extends Component {
    state = {
      name: 'React',
      isLiked: false
    }
    render () {
      return (
        <div>
          <h1>欢迎来到{this.state.name}的世界</h1>
          <button>
            {
              this.state.isLiked ? '❤️取消' : '🖤收藏'
            }
          </button>
        </div>
    	)
    }
  }
  
  

  • 放在类的构造器函数中 constructor【 推荐 】

  import React, { Component } from 'react'
  import ReactDOM from 'react-dom'
  
  class App extends Component {
    constructor() {
      super()
      this.state = {
        name: 'React',
        isLiked: false
      }
    }
    render () {
      return (
    		<div>
          <h1>欢迎来到{this.state.name}的世界</h1>
          <button>
            {
              this.state.isLiked ? '❤️取消' : '🖤收藏'
            }
          </button>
        </div>
    	)
    }
  }
  
  

  • 使用 this.setState()修改state

  import React, { Component } from 'react'
  import ReactDOM from 'react-dom'
  
  class App extends Component {
    constructor() {
      super()
      this.state = {
        name: 'React',
        isLiked: false
      }
    }
    handleBtnClick = () => {
      this.setState({
        isLiked: !this.state.isLiked
      })
    }
    render () {
      return (
        <div>
          <h1>欢迎来到{this.state.name}的世界</h1>
          <button onClick={this.handleBtnClick}>
            {
              this.state.isLiked ? '❤️取消' : '🖤收藏'
            }
          </button>
        </div>
    	)
    }
  }
  
  

setState有两个参数第一个参数可以是对象，也可以是方法 【return一个对象】，我们把这个参数叫做updater

• 参数是对象

  this.setState({
    isLiked: !this.state.isLiked
  })
  

• 参数是方法

  this.setState((prevState, props) => {
    return {
      isLiked: !prevState.isLiked
    }
  })
  

setState是异步的，所以想要获取到最新的state，没有办法获取，就有了第二个参数，这是一个可选的回调函数

this.setState((prevState, props) => {
  return {
    isLiked: !prevState.isLiked
  }
}, () => {
  console.log('回调里的',this.state.isLiked)
})
console.log('setState外部的',this.state.isLiked)

注意
状态只能自己定义，自己修改，别人无权修改