React 合成事件与原生事件

专心搞前端的第14天
在看《深入react技术栈》的时候试了下21章的在react中使用原生事件。发现一些写法不好使了，所以查了下文档，顺便粗略看了下事件。在此做下记录。

原书在ref的用法已不再支持，使用ReactcreateRef()后写了示例如下：

在jsx中书写的事件是合成事件，如果要获取原生事件需使用enativeEvent。react并没有将真实事件绑定在元素上，而是将真实事件委托至了document中。

所以如果在原生事件中使用stopPropagation阻止冒泡的话，合成事件不再触发。如果在合成事件中使用stopPropagation。其实使用的并不是原生的stopPropagation。无法阻止原生事件触发。

听说vite已经到了2x版本，赶紧打开文档看了看
输入项目名称后，选择react回车、再选中react回车，ok，生成的目录结构如下

打开viteconfigjs，默认配置如下：

那么我们按照库模式修改配置，打包文件输出到lib/dist目录下

库入口是components目录下的indexjsx文件，该文件用于导出库组件，如：

那么我们需要写个button组件

接下来就可以打包组件了，

结果如下图：

打包后生成了两个文件

出现下图显示表示登录成功。什么，还没npm账号？作为新时代农民工，npm账号必须注册一下（此处省略）

我们要发布的包在lib目录下，那么在该目录下添加packagejson文件

那么我们进入到该目录

激动人心的时刻到了，输入发布命令

结果

什么，竟然报错了，好吧，原来是镜像搞的鬼
切换回原镜像

OK，重新yarn publish
发布后，我们就可以使用这个包了，就在刚才的项目里引用试试

到src/appjsx文件里引用这个组件

回到命令行，启动项目

首先在Android中嵌入React Native：
每一个Android Studio project下包含多个module，所以，从命令行进入到module根目录，运行：
[plain] view plain copy
$ npm init
$ npm install --save react-native
$ curl -o flowconfig >

1、Jsx和template

在Vue2中是使用 template 的，这点使用 Vue 的同学们都知道，而在 React 中使用的是 JSX ， JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

它有以下优点：

JSX 的例子：使用ReactDOMrender函数，将DOM渲染到对应到id为app的节点下

2、React 中给元素设置 style

React 使用内联样式。我们可以使用 驼峰法 语法来设置内联样式 React 会在指定元素数字后自动添加 px 。以下实例演示了给 h1 元素添加 myStyle 内联样式：

3、React 中给元素设置 class

由于 JSX 就是 JavaScript，一些标识符像 class 不建议作为 XML 属性名。作为替代，使用 className 来做对应的属性。

4、React 中的点击事件

在 Vue 中的点击事件使用的是 @click 来触发的，而在 JSX 中使用的是 onClick

5、React 中修改值触发DOM更新

我使用的是 React hook 其中的 useState ，这一个hook在修改常量的时候比较简单，但是在修改引用 对象 或者 数组 的时候就需要先进行 浅拷贝 再进行覆盖修改

6、生命周期

使用React的hook—— useEffect

第二个参数不传

当 useEffect 第二个参数不传时， 页面初始 和 数据更新 的时候，第一个参数函数都会执行，所以此时初始页面时会输出一次啦啦啦，然后无论你点修改num或者修改count的按钮时，也都会输出啦啦啦

第二个参数传递空数组

当 useEffect 第二个参数传 [] 时，那么第一个参数函数只有在 页面初始 的时候才会执行，也就是只执行一次，无论你点修改num或者修改count的按钮，都不会执行这个函数

第二个参数传递非空数组

当 useEffect 第二个参数传非空数组时， 页面初始 和 依赖的数据发生更新 的时候，第一个参数函数都会执行。比如上方的例子：

return清除 *** 作

React 会在组件卸载的时候执行清除 *** 作。effect 在每次渲染的时候都会执行。React 会在执行当前 effect 之前对上一个 effect 进行清除。

实在不理解的同学，可以疯狂点击按钮，看看 我是定时器 这句话会输出多遍还是只输出一遍，就恍然大悟了

7、React 中实现 v-if & v-else

Vue中的v-if和v-else

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。

也可以用 v-else 添加一个其他模块：

React中实现

如果单单只想实现 v-if 的话，可以借助 && 逻辑运算符

如果想实现 v-if 和 v-else 的话，可以借助 三元运算符

8、React 中实现 v-show

Vue 中的 v-show

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。 v-show 只是简单地切换元素的 CSS property display 。

React中实现

其实就是改变元素的 display 这个样式来实现效果

9、React 中实现 v-for

我们可以用 v-for 指令基于一个数组来渲染一个列表。 v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数组，而 item 则是数组的每一项的别名。

Vue中的v-for

React中实现

JSX 允许在模板中插入数组，数组会自动展开所有成员：

但是我大多数情况会使用数组的 map 方法来协助渲染

10、React 中实现 computed

Vue 中的 computed

只要 name 或者 food 改变， mag 会更新成相应的值

React中实现

在 React 中需要通过 useMemo 这个 hook 来来实现 computed 的效果

11、React 中实现 watch

vue比较好。

VUE 是 iOS 和 Android 平台上的一款 Vlog 社区与编辑工具，允许用户通过简单的 *** 作实现 Vlog 的拍摄、剪辑、细调、和发布，记录与分享生活。还可以在社区直接浏览他人发布的 Vlog，与 Vloggers 互动。

随着手机摄像头的发展，越来越多的人开始使用手机拍照和摄像。摄像一般来说要比拍照门槛高，但是视频传播的信息量又远大于照片。VUE 就诞生在这样的背景下，希望用拍照一样简单的 *** 作，帮助用户在手机上拍摄精美的短视频。

主要功能：

分镜头：通过点按改变视频的分镜数实现简易的剪辑效果，而剪辑能够让视频传达更多的信息。

实时滤镜：由调色专家调制的12款滤镜供选择，切换至前置摄像头会出现自然的自拍美颜功能。

贴纸：支持40款手绘贴纸，还可以编辑贴纸的出现时间。

自由画幅设置：支持1:1、16:9、239:1 三种画幅的视频拍摄。

    作为一个入行一年的小菜鸡前端，一直以来对前端项目怎么部署到nginx的颇有兴趣，恰好最近某云的服务器比较便宜，就买了一年来配置玩，下面记录一下这次配置的过程和踩到的坑。

1、nginx的配置是在/usr/local/nginx/conf下的nginxconf进行配置，我一开始搞错了地方，一直在/usr/local/nginx/sbin/nginx-1120/conf下的nginxconf配置，导致一直没有生效。

2、全部配置完成后，出现了一个问题，当通过url来访问页面前端路由的时候，会报404；但是通过页面内按钮进行路由跳转的时候是没有问题的，经过查找相关问题发现需要在nginxconf中location中加上图中这两个（具体原因需要进一步查阅）：

请先给出明确答复：推荐选前端开发，web前端可以说前途不可限量！

解释原因：

现在的Web前端技术可以说是越来越成熟了，Web前端市场也非常的火爆，Web前端人才也是异常的紧缺。再者，由于互联网的崛起，Web前端技术的不断发展，也占据了互联网的一席之地。

那为什么说Web前端无可限量呢？国外著名的自媒体平台facebook，相信大家多多少少知道一点，也用过一点，它就是Web前端技术的产物，完全基于前端框架打造出来的平台。再者，大家常用的外卖平台饿了么，它旗下的部分产品就是基于Web前端技术的。像淘宝，百度，阿里等等，都已经将Web前端技术打入到了自己的产品中。

前端开发行业薪资水平呈上涨趋势，Web前端开发早已不是做带动画的下拉菜单的时代了，他们已成为互联网主宰者，各行业都用其开发互联网应用。但目前整互联网行业的Web前端开发工程师紧俏，企业正高薪求才，薪资待遇一涨再涨 ！

Web前端技术可以说是越来越成熟了，Web前端市场也非常的火爆，Web前端人才也是异常的紧缺。再者，Web前端行业也是无可限量。由于互联网的崛起，Web前端技术的不断发展，也占据了互联网的一席之地。

Web前端开发工程师已经成为发展中的职业香馍馍。几乎整个互联网行业都缺Web前端工程师，无论是刚起步的创业公司，还是上市公司乃至巨头，空缺一样存在。优秀的Web前端工程师简直比大熊猫还稀少。

有无解决办法：所以，还是很推荐你学习web前端的；如果真的想学习，可以了解一下北京尚学堂，我们是专门做编程培训的，拥有极其丰厚的师资力量，带给你不一样的学习体验。分享一下前端的知识框架，希望对你有所帮助：

---