大家好，今天来为大家解答react谷歌浏览器插件这个问题的一些问题点，包括react google也一样很多人还不知道，因此呢，今天就来为大家分析分析，现在让我们一起来看看吧！如果解决了您的问题，还望您关注下本站哦，谢谢~

本文目录

1. React基础
2. React如何实现浏览器打印部分内容详析
3. 在浏览器里用react库 不通过import

一、React基础

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

react中文网：

谷歌react调试工具：react develpoer tools，用于调试react

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

componentWillMount：组件将要被渲染

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

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

componentWillUpdate:组件将要开始更新

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

componentWillReceiveProps:组件接收props更新

componentWillUnMount:组件将要卸载

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

二、React如何实现浏览器打印部分内容详析

近期着手项目任务的打印功能，在此作个记录，本文介绍基于React的一种调用浏览器打印页面指定内容的方法。

整体思路：通过构建一个隐藏的元素（该元素包裹需打印的内容），当打印行为触发时，将页面其他的一些不需要打印的元素隐藏，然后将需打印的元素追加到body中，打印完成后，再恢复初始状态即可。浏览器打印的本质还是将web页面中的元素打印出来而已。

在页面中构建一个display为none的元素，里面的内容为你需要打印的内容。我们还需要设置包裹打印内容的元素的ref属性，以便于后面获取到元素。

<div style={{ display:'none'}}>

<div ref={el=>(this.printRef= el)}>

预览界面关闭后，将待打印元素从body中移除，将原始页面恢复。

let printView= this.state.printRef//获取待打印元素

document.querySelector('#root').className='print-hide'//将根元素隐藏

document.body.appendChild(printView)//将待打印元素追加到body中

window.print()//调用浏览器的打印预览

document.body.removeChild(printView)//将待打印元素从body中移除

document.querySelector('#root').className=''//将原始页面恢复

visibility: hidden!important;

其中，@page中的size可以自己设置纸张的大小，如果是A4纸可以直接设置值为A4，媒体查询@media print中设置的是打印时的样式，因为打印设备知道其输出区域的物理大小，所以使用厘米（cm）、毫米（mm）、英寸（in）等作为打印设计的单位完全可行。

直接替换body的内容为要打印的内容，之后再重新刷新页面。

const old= window.document.body.innerHTML//备份原来的页面

window.document.body.innerHTML=''

window.document.body.appendChild(/*将你要打印的内容附加到这*/)

window.print()//调用print()函数时，会跳出打印预览的界面，以下的代码被阻塞，关闭预览界面后继续执行

window.document.body.innerHTML= old

window.location.reload()//重新加载旧页面

打开一个新窗口，将打印内容放到新窗口打印，打印结束后关闭新窗口

const newWindow= window.open("打印窗口","_blank")

const docStr='<div>test</div>'//需要打印的内容

newWindow.document.write(docStr)

const styles= document.createElement("style")

styles.setAttribute('type','text/css')//media="print"

newWindow.document.getElementsByTagName('head')[0].appendChild(styles)

以上两种方法可能会造成CSS样式应用无效的问题。

第二小节的步骤2中的意思是：将页面中所有不需要打印的元素隐藏，特别注意像模态窗Model这些元素，也要为它们加上'print-hide'className属性。

如果需要在特定位置强制分页打印，可以尝试在对应元素上设置page-break-before：always!important、page-break-after：always!importantCSS属性，该属性只对块级元素有效。

进入打印预览后，我们无法获知用户最终是选择了打印，还是选择了取消。这里若有人知道解决方法的话，欢迎留言。

三、在浏览器里用react库 不通过import

1、在浏览器里用react库不通过import的解释如下：

2、import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径，跟react没什么关系的。如果你的from只写了文件名，也可以写一个配置文件，在配置文件里面写上这个文件的路径，js解析器如果在from里面的路径找不到文件的话，就去配置文件下面找的。

关于本次react谷歌浏览器插件和react google的问题分享到这里就结束了，如果解决了您的问题，我们非常高兴。