React初探之React特性

一、声明式开发

与原生DOM、JQuery等命令式编程不同

不通过指令来控制视图变化,是面向数据的编程

通过控制数据,改动数据的方式控制视图的变化,DOM的部分React会帮你自动构建

二、可以与其他框架并存

`ReactDOM.render(<TodoList />, document.getElementById(‘root‘));`

如上,React只控制index.html中id=root部分dom的渲染,其他部分不作控制

可被兼容到其他框架中(只要其他框架不影响它)

三、组件化

每一个ReactJS文件都是一个组件,含视图、逻辑操作、数据

组件可以被嵌套到其他组件之中

注意组件声明需要首字母大写,如`<TodoList />`

四、单向数据流

子组件对于父组件传递过来的数据是【只读】的

子组件直接不可修改父组件中的数据,只能通过调用父组件传递过来的方法,来间接修改父组件的数据

形成了单向清晰的数据流

防止了当一个父组件的变量被传递到多个子组件中时,一旦该变量被修改,所有传递到子组件的变量都会被修改的问题

这样出现bug调试会比较困难,因为不清楚到底是哪个子组件改的

把对父组件的bug调试控制在父组件之中

五、视图层框架

React框架只负责视图层部分的实现,以及父子组件之间简单的通信

涉及到复杂的跨组件通信,需要借助Redux等数据层框架实现

这样为搭建小项目提供了简易性,为搭建大项目提供了灵活性

六、函数式编程

每个功能都是一个小函数,函数大了还可以继续拆分,维护起来比较容易

提高了代码可读性,为后续自动化测试提供了便利

原文地址:https://www.cnblogs.com/luffa/p/10349712.html

时间: 2024-09-30 06:33:47

React初探之React特性的相关文章

[深入剖析React Native]React 初探

认识React React是一个用于构建用户界面的JavaScript库. React主要用于构建UI,很多人认为React是MVC中的V,即视图. React起源于Facebook的内部项目,用来架设Instagram的网站,并于2013年5月开源. React拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和实用它. React特点 声明式设计 - React**采用声明范式**,可以轻松描述应用. 高效 - React通过对DOM的模拟,最大限度地减少与DOM的交互. 灵活 - R

[译文]React v16(新特性)

[译文]React v16(新特性) 查看原文内容 我们很高兴的宣布React v16.0发布了! 这个版本有很多长期被使用者期待的功能,包括: fragments (返回片段类型) error boundaries(处理错误) portals (挂载方式) custom DOM attributes (支持自定义DOM属性) improved server-side rendering (提升服务端渲染性能) reduced file size (减少文件大小) (下面逐一说明) render

react初探(二)之父子组件通信、封装公共组件

一.前言 在组件方面react和Vue一样的,核心思想玩的就是组件,下面举两个组件常用的情景. 场景一:假如我们现在有一个页面包含表格以及多个弹框,这种时候如果将这个页面的业务代码写在一个组件中,那么这一块的代码会看着非常恶心.如果这个时候我们将这个页面的表格以及弹框这些单独的模块分别写成组件的形式,然后再在这个页面中将这些组件引入进来,那样我们的代码会看着非常整洁.这样做会需要使用到父子组件之间的通信,下面会详细解释. 场景二:日常项目中我们会经常遇到某一个功能会在不同地方使用,但是每次使用的

React劲爆新特性Hooks 重构去哪儿网火车票PWA云资源

var link="www.marenzy.top"//完整视频资源获取地址,复制链接在浏览器打开 var vx="aishangit666"//如链接失效可添加微信 React劲爆新特性Hooks 重构去哪儿网火车票PWA 本课程先带你细数最近一年来React的新特性,如Hooks.Redux API,让你从头理解Hooks对传统React开发方式的革命性改变.再利用所学知识,在不同场景下,重构去哪儿网火车票系统,并使用PWA实现堪比原生APP体验的应用. Rea

React(^16.8) 新增特性Hook

Hook 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性. hook包含以下函数:useState, useEffect, useContext, useReducer, useMemo, useRef等.引入方式: import {useState, useEffec ...} from 'react'; 1. let [参数名称, 修改参数的方法名] = useState(参数默认值); import React,

facebook开源前段UI框架React初探

最近最火的前端UI框架非React莫属了.赶紧找时间了解一下. 项目地址:http://facebook.github.io/react/ 官方的介绍:A JavaScript library for building user interfaces (前端UI的js框架) 具有三个特点: Just the UI Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of

React Native之React速学教程(下)

概述 本篇为<React Native之React速学教程>的最后一篇.本篇将带着大家一起认识ES6,学习在开发中常用的一些ES6的新特性,以及ES6与ES5的区别,解决大家在学习React /React Native过程中对于ES6与ES5的一些困惑. ES6的特性 何为ES6? ES6全称ECMAScript 6.0,ES6于2015年6月17日发布,ECMAScript是ECMA制定的标准化脚本语言.目前JavaScript使用的ECMAScript版本为ECMAScript-262.

React Native之React速学教程(上)

概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解. What's React React是一个用于组建用户界面的JavaScript库,让你以更简单的方式来创建交互式用户界面. 当数据改变时,React将高效的更新和渲染需要更新的组件.声明性视图使你的代码更可预测,更容易调试. 构建封装管理自己的状态的组件,然后将它们组装成复杂的用户界面.由于组件逻辑是用

React Native之React速学教程(中)

概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解. What's React React是一个用于组建用户界面的JavaScript库,让你以更简单的方式来创建交互式用户界面. 当数据改变时,React将高效的更新和渲染需要更新的组件.声明性视图使你的代码更可预测,更容易调试. 构建封装管理自己的状态的组件,然后将它们组装成复杂的用户界面.由于组件逻辑是用