react使用总结

liaosilzu2007 发布于2019-08-21 16:52 / 2984人阅读

最近学了一些 react 和es6 的一些知识，并且使用 react 写了一个 TodoList 项目===>预览 && 源码感觉学的挺多的，并且遇到的坑也不少?，说实话，一开始学 react 看到 jsx 语法有点不适应，说好的结构和行为分离呢?，不过随着通过一个项目的完成，渐渐明白了这么写的好处

好处

自定义标签

结构清晰

代码模块化

更加语义化

不过也有缺点

浏览器不支持这语法

必须通过一大堆工具来转换

一些需要注意的点

1. react声明组件时，组件名称必须以大写字母开头如?：
2. 每个标签必须闭合,因为采用的 js+xml 写法，如?:
3. 组件的返回值只能有一个顶层元素，如?：

下面是错误的：

render () {
  return (
    1
    2
  )
}

必须这样

render () {
  return (
    
        1
        2
    
  )
}

4. return后面要加一个括号,目的是防止 JavaScript 代码在解析时自动在换行处添加分号:

     renderSquare(i) {
       return (
         
       );
     }

5. render()里面不能写 class,for,而是要写成className和htmlFor,因为 class ，for 是 javascript 的关键字，因此不能使用，如：

下面是错误的

而是要写 className：

6. 不要直接更新状态，如

 this.state.comment = "Hello";

此代码不会重新渲染组件的，之前就这么写，啥反应也没有?，应该要用setState():?

 this.setState({comment: "Hello"});

（注意！！：构造函数（constructor）是唯一能够初始化 this.state 的地方。）

7. 使用style

我们在 html 可以这么写：

但是在 jsx 里面却不能这么写，必须用两个花括号包裹，并且里面不能写-，要用驼峰形式写，如上面的 background-color写成backgroundColor:

8. 关于 setState

setState方法用于更新当前组件的state状态值，但调用这个方法后，state并不会立即更新，而是在render方法调用后才会更新

react 特点

虚拟DOM: React是以数据驱动的，每次数据变化React都会扫描整个虚拟DOM树，自动计算与上次虚拟DOM的差异变化，然后针对需要变化的部分进行实际的浏览器DOM更新。

组件化： React可以从功能角度划分，将UI分解成不同组件，各组件都独立封装，整个UI是由一个个小组件构成的一个大组件，每个组件只关系自身的逻辑，彼此独立（比如你有个按钮，很多页面都有这个按钮，那么就可以把这个按钮封装成该组件）。

单项数据流：React只有单向数据流动-从父节点传递到子节点

云服务器 GPU云服务器 react使用webrtc 使用方法总结 react _React

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88840.html

从一次重写原生方法遇到的坑，总结一下Web中的事件系统

摘要：问题初探索删掉那一点重写的代码后，表现符合预期了。每一次都重新造一个虚拟的，然后监听其自定义事件，并且立即触发这个自定义事件。真的不要随便重写原生方法。。。于是，我全面总结一下了中的事件系统，也算是对基础的巩固。写在前面前段时间，我写过一篇文章前端开发中的Error以及异常捕获。在文章中，我提到了这个问题： showImg(https://segmentfault.com/img...

oysun 2019-08-23 14:42 评论0 收藏0
todo-list 项目问题总结（使用 react 进行开发）

摘要：项目问题总结这个项目，很简单，前端使用，后端使用进行开发。方便移动端开发。当动画结束后，有一个钩子函数可以使用其他一些功能组件，都是自己尝试去编写的，像日历组件组件组件等。版本的，是没有任何的钩子函数，我就感觉懵逼了。。。 todo-list 项目问题总结这个 todo-list 项目，很简单，前端使用 react，后端 nodejs 使用 koa2 进行开发。数据库使用 Mysql...

shengguo 2019-08-22 15:37 评论0 收藏0
两年React老兵的总结 - 类型检查篇

摘要：系列引言最近准备培训新人为了方便新人较快入手开发并编写高质量的组件代码我根据自己的实践经验对组件设计的相关实践和规范整理了一些文档将部分章节分享了出来由于经验有限文章可能会有某些错误希望大家指出互相交流由于篇幅太长所以拆分为几篇文章主要有以系列引言最近准备培训新人, 为了方便新人较快入手 React 开发并编写高质量的组件代码, 我根据自己的实践经验对React 组件设计的相关实践...

scola666 2019-08-23 18:38 评论0 收藏0
React同构直出优化总结

摘要：同构的关键要素完善的属性及生命周期与客户端的时机是同构的关键。的一致性在前后端渲染相同的，将输出一致的结构。以上便是在同构服务端渲染的提供的基础条件。可以将封装至的中，在服务端上生成随机数并传入到这个中，从而保证随机数在客户端和服务端一致。原文地址 React 的实践从去年在 PC QQ家校群开始，由于 PC 上的网络及环境都相当好，所以在使用时可谓一帆风顺，偶尔遇到点小磕绊，也能够...

alaege 2019-08-21 10:53 评论0 收藏0
React Fiber源码分析第四篇（归纳总结）

摘要：为什么网页性能会变高要回答这个问题，需要回头看是单线程的知识点。在分析的过程中，发现了的源码中使用了很多链式结构，回调链，任务链等，这个主要是为了增删时性能比较高系列文章 React Fiber源码分析第一篇 React Fiber源码分析第二篇（同步模式） React Fiber源码分析第三篇（异步状态） React Fiber源码分析第四篇（归纳总结）前言 Rea...

jsdt 2019-08-23 15:05 评论0 收藏0