React如何快速上手

一、React概述

  英文官网：https://reactjs.org/

  中文网站：https://react.docschina.org/

  用于构建用户界面的 JavaScript 库（React只涉及JS，不涉及HTML/CSS），由Facebook在2013年5月开源，目前最新稳定版是v17.0.2。

  项目中使用React的两种方式：

①脚本引入式——简单直接，一般用于小型页面

②脚手架方式——适合于真正的大型项目开发

二、JSX

  JSX：JavaScript XML，使用XML语法创建JS对象的技术，等价于React.createElement() —— 本身是一种JS的语法变种，浏览器无法直接执行，必需Babel编译器的转化。

  语法要求如下：

  ①一段JSX可以用( )括起来，也可以不用 —— 推荐使用

  ②JSX采用严格的XML语法：一段JSX有且只有一个根标签

  ③JSX中所有的HTML标签都是一个变量名——这类变量名只允许用纯小写形式

  ④用户自定义组件名对应的标签必须以大写字母开头

 ⑤标签的属性必须使用单引号或双引号括起来

  ⑥一些特殊的属性名必须加以修改， 例如： class变为className

  ⑦JSX中“拼接”变量——本质是“数据绑定”，内容绑定和属性绑定语法完全一样

        <h1 title={age}> {age} </h1>

  ⑧JSX对象的样式绑定分为两种：

        className： 绑定为一个字符串即可

        style：不能赋值为字符串，必须绑定为一个“样式对象”，形如：{color:'red', backgroundColor: '#fff'}

  ⑨JSX可以绑定原生DOM事件，但是必须改为“小驼峰命名法”，并且赋值时必须绑定为函数

        <button onClick={ f2 }></button>

  ⑩JSX中可以声明注释，写法：{/* 注释内容 */}

三、React中自定义组件

 React中提供了两种创建自定义组件的语法：

语法1：函数式组件

        function 组件名( ){

                return (JSX)

        }

        let  el = (<组件名></组件名>)

 语法2：class式组件

        class 组件名  extends  React.Component {

          render(){

                        return (JSX)

                }

    }

    let  el  = (<组件名></组件名>)

一、React项目脚手架

  Vue.js为了方便开发者使用Vue.js的全部特性，提供了一个Vue-CLI工具，用于创建脚手架项目；

  React为了方便开发者使用React的全部特性，提供了一个create-react-app工具，用于创建脚手架项目；

  使用方法：

  ①确保Node >= 14.0.0 和 npm >= 5.6， NPM仓库建议使用淘宝或华为的镜像

                node  -v

                npm   -v

                npm  config   get   registry

  ②下载/安装Windows全局命令：

                npm  i   -g  create-react-app

        npm下载的全局命令默认保存在 c:/User/用户名/AppData/Roaming/npm

  ③使用全局命令在当前目录下创建脚手架项目：

                create-react-app   项目名

    注意：项目名不允许包含大写字母

  ④进入当前目录下创建的项目目录：  

  ⑤启动项目自带的开发服务器：

                npm  start

注意：Windows10开始，命令行界面中只要点击了鼠标左键，就会锁定当前界面不往下执行！！！ 解决方法：点击一下鼠标右键，取消命令行界面锁定。

如果从NPM默认的官方仓库中下载第三方工具模块速度较慢或下载过程总提示错误，请修改下载仓库： 默认仓库：https://registry.npmjs.org/ 建议修改为淘宝仓库：https://registry.npmmirror.com/ 也可修改为华为仓库：https://repo.huaweicloud.com/repository/npm/

查看当前仓库地址：  npm  config   get   registry 修改当前仓库地址：  npm  config   set   registry   仓库地址

二、：如何解决React事件监听函数中this指向丢失问题？

看之前发的文章

三、React中的条件渲染

  Vue.js中使用v-if / v-else 实现模板中的条件渲染；

  小程序中使用 wx:if / wx:else 实现模板中的条件渲染；

  React中没有指令概念 —— 只有JS：

       f1( ){

                if( ){  return  (JSX)  }

                else {  return  (JSX)  }

        }

        render(){

                return (

                        <div>{ this.f1( ) }</div>

                )

        }

四、React中的列表渲染

  Vue.js中使用v-for 实现模板中的列表项循环渲染；

  小程序中使用 wx:for 实现模板中的列表项循环渲染；

  React中没有指令系统 —— 只有JS：

       f2(){   //把原始数组转化为一个JSX数据

                let newList = [ ]

                for(let i=0; i<老数组的长度; i++){

                        newList.push( JSX )

                }

                return newList

        }

        render(){

                return ( <div>{this.f2()}</div> )

        }

三、受控组件和非受控组件

  Vue.js中有v-model指令实现“双向数据绑定”：   

        方向1：Model Data 绑定到 Template View

        方向2：Template View 绑定到 Model Data

  React中没有模板，没有指令，没有“双向数据绑定”概念。类似概念的解决方案：

解决方案1：受控组件 表单元素value绑定到model，只有model改变了表单元素才能改变（即用户的输入无效了） Model：state = { uname: "" } f1=(e)=>{    let  uname = e.target.value    this.setState({uname}) } JSX：  <input  value={this.state.uname}  onChange={this.f1}/>

解决方案2：非受控组件——了解 myUnameRef = React.createRef( ) JSX：<input  ref={this.myUnameRef} /> f3(){      let uname = this.myUnameRef.current.value }

一、React应用中的服务器端数据请求方案

 React官方没有提供任何的异步请求方案，可以任意选择XHR、或axios、或fetch。

 fetch手册：https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

使用fetch发起GET请求： let url = '....' fetch(url) .then(res=>res.json( )) .then(data=>console.log(data)) .catch(err=>console.log(err))

使用fetch发起POST请求： let url = '....' let options = {     method: 'POST',     headers: { 'Content-Type': 'application/x-www-form-urlencoded' },     body: 'name=dang&pwd=123456' } fetch(url, options) .then(res=>res.json( )) .then(data=>console.log(data)) .catch(err=>console.log(err))

面试题：响应消息主体的常见内容类型有哪些？——非常多 text/html、 text/css、 appliction/javascript、 image/jpeg、 application/json ...

面试题：请求消息主体的常见内容类型有哪些？——只有四种 ① text/plain ② application/x-www-form-urlencoded ③ multipart/form-data ④ application/json

二、组件的生命周期

  Vue.js中组件的生命周期函数：

        创建阶段：beforeCreate / created

        挂载阶段：beforeMount / mounted

        更新阶段：beforeUpdate / updated

        销毁阶段：beforeDestroy / destroyed

  微信小程序中组件的生命周期函数：

        onLoad / onShow / onReady / onHide / onUnload

https://react.docschina.org/docs/react-component.html

  React中组件的生命周期方法分为：

        挂载阶段：

                        constructor()

                        render()

                        componentDidMount() 组件挂载完成

        更新阶段：

                        shouldComponentUpdate() 应该让当前组件继续更新吗？

                        render() 

                        componentDidUpdate() 组件完成更新

        卸载阶段：

                        componentWillUnmount() 组件即将卸载

面向过程的编程 —— 项目由一个又一个的function组成 ——  198X 面向对象的编程 —— 项目由一个又一个的class组成 —— 199X

三、React中的Hook

  React诞生初期（2013年中），class组件是主流，function组件比较少用——没有state和生命周期。

  2018年，React V16.8诞生，React官方为function组件添加了很多强大的功能（例如：state和生命周期），所有class组件可以实现的功能function组件都可以实现了，且function组件中没有“恼人的this问题”——function组件逐渐成为主流。

 React Hook：钩子，用于为函数式组件“勾住/添加”一些辅助功能 —— 不能用于class式组件。不论是官方提供的钩子，还是自定义的钩子，本质都是一个以“use”开头的函数

function组件声明state的语法 —— 使用 State Hook（useState）：状态钩子    let  [ 状态变量名,  修改状态变量的方法 ] = useState(状态数据的初始值)

function组件声明生命周期的语法 —— 使用 Effect Hook（useEffect）：副作用钩子/辅助功能钩子    完成类组件中 componentDidMount 类似的功能：        useEffect( ( )=>{            //此处的内容就相当于"组件挂载完成"生命周期方法        }, [ ] )    完成类组件中 componentDidUpdate 类似的功能：        useEffect( ( )=>{            //此处的内容就相当于"组件更新完成"生命周期方法        }, [count, uname] )    完成类组件中 componentWillUnmount 类似的功能：        useEffect( ( )=>{            return ()=>{                 //此处的内容就相当于"组件即将卸载"生命周期方法            }        }, [ ] )