React初识整理

Posted zhangzhiyong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React初识整理相关的知识,希望对你有一定的参考价值。

 

一、React的特点

1、自动化的UI状态管理:自动完成数据变化与界面效果的更新。 

2、虚拟DOM:创建1个虚拟的dom节点树,放在内存里(内存修改数据效率高),数据变化时先修改内存里的虚拟DOM,然后与页面的DOM进行对比,React可以做优化,优化后可只修改变化的部分,缩小节点更改的范围,从而提高效率。(正常情况下改变节点后要重新渲染页面,效率慢)。

3、组件化开发:管理页面的各功能,将1个功能视为1个组件。每个组件都可以有各自的结构、样式、行为,然后把所有的组件拼合起来的开发方式。单页应用的实现方式。

4、完全在js中定义UI:一个组件就是1个js。

5、JSX:javascript XML。使React的标签写法像html那样来编写

6、只是MVC构架中的V:MVC是一种架构模式,model(模型:获取数据)→ view(视图:渲染)→controller(控制器:关联数据与视图)。

7、单向数据流:只能父级传子级,便于追踪数据的来源。

二、创建一个React应用

1、引入两个React的在线js文件:

<script crossorigin src="js/react.development.js"></script>
 <script crossorigin src="js/react-dom.development.js"></script>

  

2、使用:

  ①渲染到页面:ReactDOM.render();

  ②创建元素:React.createElement()

     - 参数1:元素名

     - 参数2:元素属性,格式为JSON。多个单词用驼峰命名,class属性要写成className

     - 参数3:标签内容,可以是文本,也可以是另一个元素对象。

3、JSX语法

   ①引入JSX编译器 babel.min.js ,然后在script里写入type值为text/babel,让浏览器认为该代码为JSX代码。但是该方法编译速度很慢,效率低。

   ②JSX规则与XML一致:

    - 允许嵌套

    - 标签必须严格闭合

    - 属性:

       - 大部分属性和HTML标签一致

       - 两个特殊:for→htmlFor class→className

       - 可以自定义属性

    - 引用变量必须用 {}花括号,花括号中可做运算

    技术分享图片

    - 引用组件用<>尖括号

    - 注释,{/*注释*/} ,要加花括号

    - style属性要写成花括号形式,如:style={{color:"red"}};

三、React的组件

  1、组件是编写React应用的基础,一个应用就是由大大小小的组件组合而成。

  2、组件分类:

     - 无状态组件:普通函数定义,无状态,没有生命周期,能够优化性能。

    技术分享图片

    - 有状态组件:推荐ES6语法定义,React内部会创建实例,并拥有完整的生命周期。

    技术分享图片

 

  3、组件规范

     - 每个组件必须有返回值,如果返回值又是一个组件则必须有且仅有一个根元素,即return后面必须有1个标签,要有返回值的起始。

    技术分享图片

     - 如果返回null/false,编译时会被替换为< noscript />

四、数据传递的props

  1、每个函数的参数里都有props。从父组件可以通过属性传递数据到子组件。得到的对应属性值可用props调用。

  2、数据可以在组件之间传递,不过只能是单向,由父传子。

  3、通过自定义属性传递

     - 无状态组件:直接用props传递

    技术分享图片

     - 有状态组件:用this.props传递

    技术分享图片

  4、通过文本内容传递:

     - 无状态组件:

    技术分享图片

    - 有状态组件:

    技术分享图片

 

五、给组件单独设置样式

  通过class属性来设置样式使得组件的内聚度不够,可以通过组件的style来为每个组件单独设置样式。(若有短线连接的要使用驼峰命名)

  技术分享图片

 

六、组件状态更新(state)

  1、使用ref获取节点,利用DOM完成节点操作   

  2、使用state对象:

     - 初始化: 在constructor里初始化

    技术分享图片

    - 使用:直接用this.state进行调用state。

    技术分享图片

     其中onClick={this.addCount}是xml里的事件处理方式,也可以直接在花括号里写函数,但是当函数体较大时,可以单独定义。

  3、函数定义方法:在render前(同级)定义函数。

     - 事件绑定的时候,即仅限事件处理函数,该函数里的this指向被改变成了undefined,所以改回来.

     - 方法一:在调用函数里写onClick={this.addCount.bind(this)},强行将this绑定到之前的this上

     - 方法二:使用箭头函数 addCount = ()=>{}

    技术分享图片

七、props和state的区别

  1、props:

     - 用于在组件之间传递数据。

     - 通过自定义属性或标签之间的内容传递。

     - 单向传递,只能父传子。

     - 可以手动设置其值,但不会更新组件状态。

  2、state:

     - 每个组件都可以初始化state对象。

     - state不能传递,传递只能用props

     - 可以设置值,对应的组件状态会更新,可以通过响应式更改UI节点

     - 设置值的方法必须是setState,而不是直接使用this.state。

八、事件处理中的this

  1、在ES6的类中,事件处理方法的this为undefined。

  2、解决办法:

     - 在构造函数中将当前对象绑定给方法中的this。

    技术分享图片

    - 使用箭头函数定义方法。

    技术分享图片

    - 在绑定事件时使用bind方法。

    技术分享图片

    - 在绑定事件时使用箭头函数。

  




以上是关于React初识整理的主要内容,如果未能解决你的问题,请参考以下文章

初识Spring源码 -- doResolveDependency | findAutowireCandidates | @Order@Priority调用排序 | @Autowired注入(代码片段

初识Spring源码 -- doResolveDependency | findAutowireCandidates | @Order@Priority调用排序 | @Autowired注入(代码片段

Java初识方法

IOS开发-OC学习-常用功能代码片段整理

VS2015 代码片段整理

19.初识Pytorch之完整的模型套路-整理后的代码 Complete model routine - compiled code