小白学React.js

Posted 2021-05-01 前端乱炖小小图

当前浏览器不支持播放音乐或语音，请在微信或其他浏览器中播放

1、react的发展

facebook公司在构建instagram网站的时候遇见了两个问题

1,  数据绑定的时候，大量操作真实dom，性能成本太高

2、网站的数据流向太混乱，不好控制

于是facebook起初调研过市场上已存的mvc（数据视图控制器）框架，发现都不太满意，于是就推陈出新，开发了react框架，并在2013年五月份开源

React的特点：

简单

声明式—自动dom操作

React的核心是组件，组件的设计目的是提高代码复用率、降低测试难度和代码复杂度。

提高代码复用率：组件将数据和逻辑封装，类似面向对象中的类。（功能和类型相近的方法和属性的集合

）

降低测试难度：组件高内聚低耦合，很容易对单个组件进行测试。

降低代码复杂度：直观的语法可以极大提高可读性。

国外使用React的公司：Facebook，Flipboard，Airbnb，BBC，GitHub， Instagram，Reddit，Uber，WhatsApp，Yahoo

国内使用React的公司：支付宝，淘宝，大搜车，Teambition，豆瓣，豌豆荚

2、react概述

     和angularJS一样react核心解决的问题是数据绑定，开发者只要将数据绑定好，剩下的开发中只要关注业务就行了

  1、组件化开发   使用react开发的时候，构建任何的页面都是组件component

  2、jsx语法和虚拟dom基于jsx语法进行 创建组件，react用变量的形式自定义了一套dom模型

  3、组件具有生命周期     每个组件都有生命周期，开发者可以基于生命周期对组件进行管理

   4、单向数据流

3、创建react的一个组件

 1、下载react  lib文件

2、导入各个文件（按顺序引入）

3、创建组件

4、渲染

组件是一个集合体，就是把html，js，css放在一起形成一个组件

4、react中如何去写css

1、基于class          --（className）

2、基于inner css  （facebook 主张的方式）  行间样式(json)

3、原型链和全局变量

5、react中事件机制

   react自定义了一套符合w3c标准的事件机制

eg：

点击：   onClick

触摸结束：  onTouchEnd

6、总结

   1、react使用createClass进行创建组件

2.、在render中通过return返回jsx  创建html内容

3、react  组件实际是将css、html、js都整合在了jsx中

补充内容：

使用步骤 1、react.creatClass()创建组件

2、要去实现组件中render方法

3、在render方法中  通过return返回jsx生成页面中的html内容

注意：1、组件命名，首字母大写

2、render方法  ReactDOM.render(<组件/>,node节点)

react中写入css

1、base class---需要将react写class--用className代替class

2、每个组件都具有自己的属性和功能   inner css     reactjs 行内       样式均是以json形式存在{color：'red'},react将变量嵌套jsx中，style={变量名称}

3、基于全局变量  也就是将css抽取变成全局变量   或者在组件原型链上面进行挂载

事件机制  

（函数声明需要与render同级，因为在react.creatClass传入的是对象，声明的函数也是其中的一个对象，是react对象对外暴露的原型链,render会计算return的方法，同样计算同级的方法）

1、直接写事件机制onClick={this.函数名}

2、将所有函数变量封装到全局变量中

3、原型链写法

在jsx中写逻辑   --要写在render和return之间

注释标签的方法{/**标签**/}

组件嵌套   不能多个节点渲染，否则最后一个组件覆盖前面的

1、目前我们写的react组件的特点

、所有组件都写在一个js文件里面  不好维护  写多个js去引入也无法识别

、通过browser.js将jsx转换成js 性能慢

2、如何解决

  借助前段构建工具webpack    

     、webpack是facebook为react量身打造的构建工具

     、主要作用是实现模块化，代码整合，代码分割的作用

     、使用webpack整合以后  也不需要使用browser将jsx转成js了

3、也就是使用webpack实现模块化---什么是模块化

、模块指的是一组具有同等属性和功能的集合叫做模块和类的概念相似

、react模块化指的是一个js中存放一个或多个组件，这些组件通过commonjs规范对外提供接口

、在其他组件当中可以调用这些对外提供成接口的组件

4、commonjs规范（模块的接收与暴露）

、一个js内部的函数或者变量想要被外部调用

、想在另一个函数中调用这些接口  需要通过require（js路径）引入组件

这样实现了一个js调用另外一个js里面的内容

5、理论上我们可以这样实现多个组件模块化  

但是浏览器支持module，require，exports吗？

实现模块化需要借助构建工具webpack

6、如何使用webpack

、全局安装

、项目中安装依赖

7、如何使用webpack

、安装webpack支持react的核心工具jsx-loader

、编写webpack.Config.Js配置文件命令脚本

、命令行运行打包输出

8、最后整合的文件  直接页面引入

   、缺少react react-dom

、下载

、在组件中require进来

二.React属性和状态数据传递

1、属性(不可改变)

1、属性和状态是react中数据传递的载体

2、属性是声明以后不允许被修改的东西

3、属性只能在组件初始化的时候声明并传入组件内部，并且在组件内部通过this.props获取

4、组件内部可以通过getDefaultProps声明默认属性

2、属性传递的方式  

     1、key-value形式

      2、展开式传入

varobj={name:"1",attr:"009"}

<ComponentName{...obj}/>

console.log(this.props.name)  

3、状态

1、是声明以后可以用来改变的，在组件中通过getInitialState进行 声明

2、this.state进行获取状态，通过setState进行修改

3、并且状态修改组件会发生二次渲染  react组件中的render方法会 重新执行

4、状态的使用

实现一个文本框点击按钮之前是文本框   点击以后变成密码框

并且按钮的内容也改变

5、使用react属性和状态实现单向数据流    

数据从父组件流向子组件（服务端-页面上）

React是单向数据流框架，可以理解成服务端流向页面上

6、使用react属性和状态实现单向数据流

实现子组件数据流向父组件

7、state的改变会导致组件的二次渲染

讲文本框的类型设置成state  按钮的文字也设置成state

先将state绑定到页面上

点击的时候去改变state的值

8、react组件的生命周期

    1、生命周期指的是组件从初始化开始到结束的过程  或者是生命周期是描述ract组件从开始到结束的过程

    2、每个react组件都具有生命周期

    3、react都对组件通过生命周期给予的钩子函数进行管理

9、钩子函数        

指的是系统某些状态和参数发生改变的时候，系统立马去通知对应处理的函数    叫做钩子函数

一方面又变动。另一方面立马去处理

10、react组件经历总体阶段

1、mounted阶段  加载阶段  或者说初始化阶段  这个阶段组件由jsx转换成真实dom

2、update阶段 组件运行中阶段  当组件修改自身状态，或者父组件修改子组件属性的时候发生的阶段

3、umount阶段  组件卸载阶段  这个一般是组件被浏览器回收的阶段

11、具体的生命周期函数------初始化阶段

react在每个不同阶段都定义了不同的钩子函数来检测组件当前的变化，或者说react组件发生改变的时候，react系统会通知一些立即去处理这些变化的函数：

1、设置默认属性 getDefaultProps

2、设置默认状态 getInitialState

3、组件即将加载时候允许的函数 componentWillMount

4、必不可少render

5、组件加载完毕的时候允许的函数componentDidMount

12 、具体的声明函数周期---运行中阶段

运行中阶段只有在父组件修改了子组件的属性或者说一个组件修改自身的状态才会发生的情况

1、组件将要接受新组件componentWillReceiveProps

2、组件是否更新 shouldComponentUpdate

3、组件即将更新 componentWillUpdate

4、必不可少的render

5、组件更新完毕时运行的函数 componentDidUpdate

13、实现自定义的react视图切换

React是组件化进行开发，所以不同于angularjs，react中没有明确的模板概念，路由概念，但是可以理解成每个react组件都可以是个模板，那我们思考当我们在构建单页面应用时候点击不同按钮时，如何进行页面切换和视图变化的呢？

解决办法：

当我们点击一个按钮的时候，想要切换到一个新页面，可以通过卸载旧的组件，再重新载入新组建就可以实现react的路由了。

卸载组件

ReactDOM.unmountComponentAtNode(‘节点’)

14、react数据绑定

1、react通过state props进行数据绑定

2、数据绑定的第一种方式：基于jsx绑定

3、在componentWillMount中获取ajax数据

4、将得到的数据存入state中

5、在render中直接将state中的数据循环遍历  放在一个jsx的数据模板中

6、循环叠加这个jsx模板   通过{}嵌入到页面中

15、mixins函数

1、作用是可以将一些公共的方法写在一个object的方法里面

2、然后通过mixins在组件中声明这个对象的表达式

3、在jsx中 就可以使用this去调用object里面的各个方法

这样实现了react多个组件之间共享一些公共的方法

三.react-Router路由

1、什么是路由？

React Router

       一个针对React而设计的路由解决方案、可以友好的帮你解决React components 到URl之间的同步映射关系。

2、安装依赖   建议使用2.2.1版本的依赖

npm install react-router@2.2.1 -D

import React from 'react'

import { render } from 'react-dom'

import { Router, Route, Link, browserHistory } from 'react-router’

react-router中定义了history这个属性 用于方便管理路由的方向 browserHistory

3、Link

定义链接的组件，类似于a标签。

<Link      to=“/users>/users</Link>

{this.props.children}＝＝相当于路由试图的容器

4、定义路由

render (<Router history={browserHistory}>

<Route path="/web/demo.html" component={Demo}>

<Route path="/home" component={Header}></Route>

<Route path="/about" component={Con}></Route>

</Route>

</Router>, document.getElementById('root'))

Path===设置路由路径

Component＝＝设置该路径要加载的组件

5、指定默认的子组件索引

指定默认情况下加载的子组件。你可以把IndexRoute想象成某个路径的index.html。

例如：

<Route path="/" component={App}>

<IndexRoute component={Index}/>

</Route>

定义：

<Link      to=“/users/1>users</Link>

<Route path="/user/:xxxx" component={User}/>

取得参数：

this.props.params.xxxx==1

7、创建项目

创建react项目

npm install -g create-react-app 全局环境

create-react-app my-app  创建项目

cd my-app 进入项目

npm start  启动