react中文官网(react中文网)

react路由

一、React路由：实现单页应用的核心技术（单页应用简称SPA）

路由原理参考资料：

二、React路由实现有两个包：

官网：

官方github:

中文路由文档：

三、React-router-dom具体使用

Route:视图展示区相当于vue中的router-view

Link:要跳转的指令相当于vue中的router-link

步骤：

1.引入所需的包：

2.用Link指令指令要跳转的路径

例如：

3.指定在哪个区域显示视图

例如：

4.如何指定高亮

例如：

可以通过activeClassName指定高亮类的样式，如果不指定activeClassName，可以直接使用active类名即可

5.路由传参

ReacrUI库antd:阿里

文档

官网地址:

记得自己曾经弱弱的发问，为什么上拉加载更多会触发多次。

效果如图

只需要使用height

效果

需要用到scrollableTarget，这时候InfiniteScroll就没必要指定height

这个要在移动端看，PC端我在mac笔记本上用三指下拉也看到过

效果如下

这节介绍一下ReactNative库中的ImageView封装原理以及大概步骤，在下一节，我们将都每一个步骤进行详细讲解。首先着重介绍一下ViewManager和SimpleViewManager。SimpleViewManager是ViewManager的子类，它是比ViewManager更为简单的管理类

1、Bootstrap是最流行的前端开发框架，可以让不是前端工程师也能开发出优美的页面，更加快捷、方便的开发web页面和移动端应用。也能开发响应式web页面，上手也非常快。

中文官网：

2、React是Facebook开发的框架，用于构建页面、javascript库。主要功能是对DOM操作，声明式设计，更快的开发出web应用系统

官网地址：

3、SemanticUI是一个完全语义化的前端CSS界面开发框架，跟Bootstrap比起来更加丰富些，不那么单一，在用户体验、样式都很丰富

官网地址：

4、FoundationbyZURB是开发适应各种设备上的前端框架，主要开发响应式web应用框架，提供很丰富的DEMO实例，学起来也非常方便上手，也提供丰富的图标库。

官网地址：

5、AmazeUI是轻量级的前端应用框架，是国内比较流行的框架，比较适用于移动端响应式开发框架，可以按照项目要求生成专属的UI框架库进行使用，组件非常丰富，可以构建出漂亮的web页面。

官网地址：

6、Pure是雅虎公司开发的轻量级、响应式CSS框架，整个框架包也是非常的小，官网也提供许多实例进行学习，对于开发小型系统界面样式可以考虑使用Pure,因为小巧方便。

官网地址：

1、jsx语法

2、组件

3、元素渲染

4、props

5、生命周期和state

6、事件

React主要是用于构建用户界面的JavaScript库，实现单页面应用。

react中文网：

谷歌react调试工具：reactdevelpoertools，用于调试react

redux调试工具：reduxdevTools，用于调试redux

markdown文本，创建的文件后缀是.md结尾的，是在github，npm,码云等代码托管平台上使用一种文本格式，在这种网站上会自动展示.md文件的内容，主要是说明功能

npxcreate-react-appmy-app

通过这个指令一键搭建react环境，基于webpack的

cdmy-app进入文件夹

npmstart启动

复制空白环境

复制已经下载好的空白环境到目标位置

cdmy-app进入文件夹

cnpmi安装

npmstart启动

1、安装react环境

2、安装chrome插件

1、介绍：HTML语言直接写在JavaScript语言之中，不加任何引号，这就是JSX（JavaScriptandXML）的语法，JSX是一种JavaScript的语法扩展，它允许HTML与JavaScript的混写。2、语法是：1）

:遇到标签就按html解析

2）{str}:遇到{}就按js解析，{}中的js代码不要直接出现{}

3、JSX是一个表达式，可以在if语句和map循环的代码块中使用JSX，将JSX赋值给变量，把JSX当作参数传入，以及从函数中返回JSX

4、JSX属性

JSXconstelement=;

2）使用大括号来定义以JavaScript表达式为值的属性

jsxconstelement=;

3）style样式使用JSX，写法如下：

.map(function(ele,index){

return返回值

})

数组的一个遍历方法,ele是数组元素项，index是下标，return后是返回值

元素描述了你在屏幕上想看到的内容，是构成React应用的最小砖块，与浏览器的DOM元素不同，React元素是创建开销极小的普通对象。ReactDOM会负责更新DOM来与React元素保持一致。

说明：1.参数1：element为要显示的元素。可以是双标签形式的，也可以是单标签形式的，如果是单标签必须有结束符号

2.参数2：parentNode为元素要显示在页面的哪个标签中。

3.渲染方法一般一个项目中只有一个。其他页面通过组件引入或者路由访问。

4.更新已渲染的元素:React元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的UI。更新UI唯一的方式是创建一个全新的元素，并将其传入ReactDOM.render()

从概念上类似于JavaScript函数。它接受任意的入参（即“props”），并返回用于描述页面展示内容的React元素。组件允许你将UI拆分为独立可复用的代码片段，并对每个片段进行独立构思。

1、函数形式

2、类形式

组件的导出使用es6模块的导出语法。可以使用exportdefault组件名，也可以使用export{组件名}

组件的引入实现es6模块的引入语法。可以使用import组件名from‘组件路径’

注意：

1、组件名称首字母必须大写

2、组件的页面结构只能有一个顶层标签,不能出现兄弟关系，页面如果比较复杂，需要使用小括号包裹起来

当React元素为用户自定义组件时，它会将JSX所接收的属性（attributes）转换为单个对象传递给组件，这个对象被称之为“props”。

父组件中：调用子组件时通过属性形式传递

子组件中：通过props接受

【示例1-5】props父组件向子组件传递数据

1.练习创建组件，导出组件，引入组件

2.练习父级通过props向子集传递数据

2.react中的生命周期函数(7个)

componentWillMount：组件将要被渲染

componentDidMount:组件渲染完成(组件进入运行状态)

shouldComponentUpdate:是否允许组件更新(这个函数中必须有返回值，如果返回true，表示允许更新；如果返回false，表示不允许更新)

componentWillUpdate:组件将要开始更新

componentDidUpdate:组件更新完成(重新进入运行状态)

componentWillReceiveProps:组件接收props更新

componentWillUnMount:组件将要卸载

组件有三个生命周期函数一生只触发一次：

componentWillMount

componentDidMount

componentWillUnMount

3.生命周期流程图

1.在react组件的生命周期函数中，this指向当前组件

2.在reactclass定义的组件中，constructor构造方法中需要通过调用super()方法生成this，这时this指向当前组件；否则不存在this，使用会报错。

3.在react组件中，自定义function函数中this默认指向undefined

组件内部的状态，内部状态只能在组件内部使用

1.函数形式的组件如果不使用HOOK新语法，是不能使用state的

2.class定义的组件中使用：

this.state.属性名调用

1.默写生命周期函数名

2.初始化state状态

3.在页面中使用state

1.在标签绑定,使用的属性方式

2.事件是以“on+事件名称”组成,使用驼峰命名法

3.事件的功能一般定义在外部，事件这里写this.事件函数名称

4.事件定义在组件中，和生命周期函数同级

实参是从bind()的第二个参数算的

在事件中添加参数e或event，放在形参最后。

同一个事件函数中出现多次state状态修改，react不会立即更新state，而是进行合并。

下面代码会先输出222，后输出111

方式1：

方式2：

1、给元素绑定事件，让this指向当前组件，并修改state的值

2、定义组件，在app.js中引入组件，把app.js的state值传递给子组件，并在子组件中显示