精华内容
下载资源
问答
  • React框架

    2020-04-13 23:25:06
    初识React框架 目录初识React框架React 的起源和发展React 的出发点与传统MVC的关系React Fiber构建React简易环境实现一个简单的例子jsx的原理jsx 的一些注意事项遍历数组点击切换样式函数式组件class组件 React 的...

    React框架

    React 的起源和发展

    React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。

    React 的出发点

    用于开发数据不断变化的大型应用程序(Building large applications with data that changes over time)

    与传统MVC的关系

    React不是一个完整的MVC框架,最多可以认为是MVC中的V(View),甚至React并不非常认可MVC开发模式;React 构建页面 UI 的库。可以简单地理解为,React 将将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合、嵌套,就成了我们的页面

    React Fiber

    在react 16之后发布的一种react 核心算法,React Fiber是对核心算法的一次重新实现(官网说法)。之前用的是diff算法。

    React Fiber的方法其实很简单——分片。把一个耗时长的任务分成很多小片,每一个小片的运行时间很短,虽然总时间依然很长,但是在每个小片执行完之后,都给其他任务一个执行的机会,这样唯一的线程就不会被独占,其他任务依然有运行的机会。

    构建React简易环境

    react开发需要引入多个依赖文件:react.js、react-dom.js,分别又有开发版本和生产版本

    react.js 帮助我们创建React对象,帮助我们创建组件等功能

    react-dom.js 中有ReactDOM对象,渲染组件的虚拟dom为真实dom

    在编写react代码的时候需要大量使用jsx代码,需要编译后使用:

    1. 浏览器端编译,通过引入browser、babel等引入的script内的代码做编译
    2. 利用webpack等开发环境进行编译,将编译好的文件引入到应用中

    实现一个简单的例子

    <!--引入react的核心包-->
    <script src="./js/react.development.js"></script>
    <!--引入开发web的包-->
    <script src="./js/react-dom.development.js"></script>
    <!--引入解析jsx的包-->
    <script src="./js/babel.js"></script>
    <script type="text/babel">
        	ReactDOM.render(<h2>hello world</h2>,
               document.getElementById("box"))
    </script>
    

    jsx的原理

    jsx 相当于一种语法糖,相当于 js+XML

    原理就是通过 React.createElement(tag,{attrs},content)
    => 相当于底层创建了js内存对象(虚拟dom)
    => ReactDOM.render()

    jsx 的一些注意事项

    1. jsx ==> js + xml
    2. 有且只能由一个根元素
    3. 因为借鉴了xml的语法规范,标签必须要闭合(特别注意单标签)
    4. class ==> className,由于class是保留字,所以在jsx中要改成className
    5. jsx里面的事件名需要改成驼峰式写法,例如onclick => onClick
    6. jsx 里面的内联样式 style={{backgroundColor:'yellow'}}

    let a = 
          <div>
            <p>我是p标签内的文字</p> {/*我是p标签内的文字*/}
            <p>{1+1}</p>            {/*2*/}
            <p>{true}</p>           {/*空*/}
            <p>{false+1}</p>        {/*1*/}
            <p>{[1,2,3,4,5]}</p>    {/*12345*/}
            <p>{undefined}</p>      {/*空*/}
            {/*<p>{{}}</p>*/}       {/*报错*/}
          </div>
        ReactDOM.render(a, document.querySelector('#box'))
    

    Boolean | undefined | null 不会被渲染出来

    数组会转成字符串的形式出现

    直接渲染对象的话会报错

    遍历数组

    let arr = ['aa','bb','cc']
    let a = 
        <ul>
          {arr.map((item, index) => {
            return <li key={index}>{item}</li>
          })}  
        </ul>
    ReactDOM.render(a, document.querySelector('#box'))
    

    key 帮助 React 识别哪些元素改变了,比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。

    点击切换样式

    let arr1 = ['aa', 'bb', 'cc']
      let curIndex = 0
      function showList(arr){
        return arr.map((item,index)=>{
          return (
            <li 
              key={index}
              style={{color:index === curIndex?'red':''}}
              onClick={()=>{
                curIndex = index;
                render()
              }}
            >
              {item}
            </li>
          )
        })
      }
      function render(){
        ReactDOM.render(
          <div>
          { showList(arr1)}
          </div>,
          document.querySelector('#box')
        )
      }
      render()
       
    

    函数式组件

    var arr2 = ["aa","bb","cc"]
    const List = props => {
      console.log(props)  //获取传递过来的参数
      return (
        <ul>
          {
            props.arr.map((item,index)=>{
              return <li key={index}>{item}</li>
            })
          }
        </ul>
      ) 
    }
    let obj = {
      arr1:"hello world",
      arr2:100
    }
    function App(){
      return (
        <div>
          <h2>商品列表</h2>   
          <List {...obj} arr={arr2}></List> 
        </div>
      )
    }
    ReactDOM.render(<App/>,document.getElementById("box"))
    

    class组件

    var goods = ["苹果","香蕉","橘子"]
    class List extends React.Component{
      render(){
        // console.log(this.props.arr) //发现this ===> props/state/refs
        let {arr} = this.props
        return (
          <ul>
            {
              arr.map((item,index)=>{
                return <li key={index}>{item}</li>
              })
            }    
          </ul>
        )
      }
    }
    //定义类组件App
    class App extends React.Component{
      render(){ //是react生命周期里面必须要写的一个钩子
        return (
          <div>
            <List arr={goods}/>    
          </div>
        )
      }
    }
    ReactDOM.render(<App/>,document.getElementById("box"))
    
    展开全文
  • 学习react框架推荐
  • simple-react一个极简的React框架,用于说明React实现原理
  • Luy,一个类React框架
  • React框架基础.pptx

    2020-03-20 09:30:32
    react框架基础讲解,react的使用规范及react的起源和发展历程,详细介绍react的组件使用,数据传递等。
  • 认识React框架

    2019-06-01 13:19:00
    在大厂面试的时候被问会不会React框架几乎是必须的,可见React框架在现在前端市场的份额。所以说学习React框架的必要性. react框架起源于Facebook的内部项目,因为对市场上的Javascript Mvc框架都不满意,就决定自己...

           在大厂面试的时候被问会不会React框架几乎是必须的,可见React框架在现在前端市场的份额。所以说学习React框架的必要性.

           react框架起源于Facebook的内部项目,因为对市场上的Javascript Mvc框架都不满意,就决定自己写一套,很牛叉吧!当这个框架出来之后,它的优势就被展示出来,于2013年5月就开源了。之后版本就一直更新,13-17年主要是低版本的(15版),17年9月出的高版本(16版),两个版本间的改动挺大的,后续会介绍改动间的差别。由于 React的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。react框架从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目,目标更是宏伟,希望用写 Web App 的方式去写 Native App。如果能够实现,整个互联网行业都会被颠覆,因为同一组人只需要写一次 UI ,就能同时运行在服务器、浏览器和手机。React主要用于构建UI。你可以在React里传递多种类型的参数,如声明代码,帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。react的最大一大特点就是集成性恨高,可以配合其他的一些库和插件更好的开发项目。

    转载于:https://www.cnblogs.com/PengZhao-Mr/p/10959294.html

    展开全文
  • native react 框架

    2019-03-07 18:14:12
  • 一个无痛使用React与JSX的迷你React框架
  • Tokopedia React开发套件 - 又一个React框架
  • ext框架和react框架 React.js和React Native是用于开发用户界面(UI)的流行开源平台。 在StackOverflow的2019年开发人员调查中,两者在可取性和使用性方面均排名很高。 Facebook在2011年将React.js开发为JavaScript...

    ext框架和react框架

    React.js和React Native是用于开发用户界面(UI)的流行开源平台。 在StackOverflow的2019年开发人员调查中,两者在可取性和使用性方面均排名很高。 Facebook在2011年将React.js开发为JavaScript库,以满足对跨平台,动态和高性能UI的需求,而Facebook在2015年发布的React Native被用于使用JavaScript构建本机应用程序。

    以下是13个最佳的React JavaScript框架; 所有这些都是开源的-前11个(如React)是根据MIT许可授权的,而后两个是根据Apache 2.0授权的。

    1.创建React应用

    Facebook开发人员的此命令行界面是每个React Native项目的必备条件。 原因是Create React App易于使用,并且使您不必手动设置和配置应用程序,从而节省了大量时间和精力。 只需一个简单的命令,一切准备就绪即可轻松创建React本机项目。 您可以使用它来构建目录和文件,该框架还包括用于构建,测试和启动应用程序的工具。

    # Install package
    $ npm install - g create - react - native - web - app
     
    # Run create - react - native - web - app < project - directory >
    $ create - react - native - web - app myApp
     
    # cd into your < project - directory >
    $ cd myApp
     
    # Run Web / Ios / Android development
    # Web
    $ npm run web
     
    # IOS ( simulator )
    $ npm run ios
     
    # Android ( connected device )
    $ npm run android

    为什么选择创建React App

    1. 使用配置包,编译器和测试运行程序开发的一流工具
    2. 应用程序结构中没有配置,也没有多余的文件
    3. 固定开发堆栈
    4. 有效的快速开发工具

    2.材料套件React

    受Google的Material Design系统启发, Material Kit React是构建React UI组件的绝佳选择。 关于这个库的最好的事情是它提供了很多组件,这些组件可以组合在一起并看起来令人难以置信。 有超过1000个完全编码的组件,每个组件都有单独的层,这些层组织在文件夹中。 这意味着您有成千上万种选择。 如果您想获得灵感或与某人分享想法或概念,也有几个示例页面。

    安装材料套件

       $ npm install @ material - ui / core 
    

    实作

    import React from 'react' ;
    import Button from '@material-ui/core/Button' ;

    const App = ( ) => (
      < Button variant = "contained" color = "primary" >
        Hello World
      </ Button >
    ) ;

    Material-UI组件无需任何其他设置即可工作,并且不会污染全局范围。

    优点

    React组件支持更轻松,更快速的Web开发。 有了它,您可以构建自己的设计系统,或者从Material Design开始。

    3.碎片React

    这个现代的React UI套件是从零开始构建的,以实现快速性能。 它具有现代化的设计系统,可让您以所需的方式自定义事物。 您甚至可以下载源文件以在代码级别自定义内容。 此外,用于样式的SCSS语法可增强开发经验。

    Shards React是基于Shards的,并使用React Datepicker,React Popper(定位引擎)和noUISlider。 它还支持令人难以置信的Material Design图标。 有一些预制的版本可以帮助您获得灵感并开始使用。

    带有纱线或NPM的安装碎片

    # Yarn
    yarn add shards - react

    # NPM
    npm i shards - react

    优点

    1. 碎片重量轻,占用空间小,压缩后重约13kb
    2. 默认情况下,碎片响应能力很强,能够适应和重排其布局以适应任​​何屏幕尺寸
    3. Shards有据可查,因此您可以尽快开始构建漂亮的界面

    4.样式化的组件

    这个高效CSS工具可帮助构建负责应用程序可视界面的小型可重用组件。 使用传统CSS,您可能会意外覆盖网站上其他位置使用的选择器,但是样式化组件可以通过直接在组件内部使用CSS语法来帮助您完全避免此问题。

    安装

     npm install -- save styled - components 
    

    实作

    const Button = styled. button `
      background : background_type ;
      border - radius : radius_value ;
      border : abc ;
      color : name_of_color ;
      Margin : margin_value ;
      padding : value ;

    优点

    1. 使组件更具可读性
    2. 组件的样式依赖JavaScript
    3. 使用CSS构建自定义组件
    4. 内联样式
    5. 只需调用styled(),即可将组件(甚至是自定义组件)转换为样式化组件

    5. Redux

    Redux是JavaScript应用程序的状态管理解决方案。 虽然它主要用于React.js,但是您也可以将其用于其他类似React的框架。

    安装

    sudo npm install redux
    sudo npm install react - redux

    实作

    import { createStore } from "redux" ;
    import rotateReducer from "reducers/rotateReducer" ;

    function configureStore ( state = { rotating : value } ) {
      return createStore ( rotateReducer , state ) ;
    }

    export default configureStore ;

    优点

    1. 可预测的状态更新有助于定义应用程序的数据流
    2. 使用reducer功能使逻辑更易于测试和时间旅行调试
    3. 集中国家

    6. React Virtualized

    这个React Native JavaScript框架有助于大列表和表格数据的呈现。 使用React Virtualized可以限制请求和文档​​对象模型(DOM)元素的数量,从而提高React应用程序的性能。

    安装

     npm install react - virtualized 
    

    实作

    import 'react-virtualized/styles.css'
    import { Column , Table } from 'react-virtualized'
    import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer'
    import List from 'react-virtualized/dist/commonjs/List'
    {
      alias : {
        'react-virtualized/List' : 'react-virtualized/dist/es/List' ,
      } ,
      ... rest
    }

    优点

    1. 有效显示大量数据
    2. 渲染海量数据
    3. 使用一组组件实现虚拟渲染

    7. React DnD

    ReactDnD负责创建复杂的拖放界面。 有数十种拖放库,但是React DnD脱颖而出是因为它基于现代HTML5的拖放API之上,使创建接口的过程变得容易。

    安装

     npm install react - dnd - preview 
    

    实作

     import Preview from 'react-dnd-preview' ;
     
      const generatePreview = ( { itemType , item , style } ) => {
        return < div class = "item-list" style = { style } > { itemType } </ div >;
      } ;
     
      class App extends React. Component {
        ...
     
        render ( ) {
          return (
            < DndProvider backend = { MyBackend } >
              < ItemList />
              < Preview generator = { generatePreview } />
              // or
              < Preview > { generatePreview } </ Preview >
            </ DndProvider >
          ) ;
        }
      }

    优点

    1. 精美自然的物品花束
    2. 强大的键盘和屏幕阅读器支持轮椅
    3. 表现出色
    4. 干净强大的API
    5. 在标准的浏览器交互中发挥出色
    6. 简约风格
    7. 没有创建其他包装器dom节点

    8. React Bootstrap

    该UI Kit库用React替换了BootstrapJavaScript,使您可以更好地控制每个组件的功能。 由于每个组件的构建都易于访问,因此React Bootstrap对于前端框架的构建可能是有益的。 有成千上万的引导主题可供选择。

    安装

     npm install react - bootstrap bootstrap 
    

    实作

    import 'bootstrap/dist/css/bootstrap.min.css' ;
    import React from 'react' ;
    import ReactDOM from 'react-dom' ;
    import './index.css' ;
    import App from './App' ;
    import registerServiceWorker from './registerServiceWorker' ;

    ReactDOM. render ( < App />, document. getElementById ( 'root' ) ) ;
    registerServiceWorker ( ) ;

    优点

    1. 可以轻松导入所需的代码/组件
    2. 通过压缩Bootstrap节省键入和错误
    3. 通过压缩Bootstrap减少打字工作和冲突
    4. 它很容易使用
    5. 它封装在元素中

    9. React Suite

    React Suite是另一个高效的React.js框架,其中包含用于企业系统产品的各种组件库。 它支持所有主要的浏览器和平台,使其几乎适用于任何系统。 它还支持服务器端渲染。

    安装

     npm i rsuite -- save 
    

    实作

    import { Button } from 'rsuite' ;
    import 'rsuite/styles/less/index.less' ;
    ReactDOM. render ( < Button > Button </ Button >, mountNode ) ;

    优点

    1. 借助全局访问功能轻松管理应用程序
    2. Redux库集中了状态管理
    3. Redux具有所有UI层的灵活性,并具有庞大的生态系统
    4. Redux降低了这种复杂性并提供了全局可访问性

    10. PrimeReact

    PrimeReact的最好之在于,它提供的组件几乎可以满足UI的所有基本要求,例如输入选项,菜单,数据演示,消息等。该框架还密切关注了移动体验,从而帮助您设计触摸-优化的元素。

    安装

    npm install primereact -- save
    npm install primeicons -- save

    实作

    import { Dialog } from 'primereact/dialog' ;
    import { Accordion , AccordionTab } from 'primereact/accordion' ;
    dependencies : {
        "react" : "^16.0.0" ,
        "react-dom" : "^16.0.0" ,
        "react-transition-group" : "^2.2.1" ,
        "classnames" : "^2.2.5" ,
        "primeicons" : "^2.0.0"
    }

    优点

    1. 简洁与性能
    2. 使用方便
    3. Spring应用
    4. 创建丰富的用户界面
    5. 可用性和简单性

    11. React Router

    React Router在React Native开发人员社区中非常流行,因为它很容易上手。 您只需要在PC上安装Git和npm软件包管理器,React的基本知识以及学习意愿即可。 没有什么太复杂的。

    安装

     $ npm install -- save react - router 
    

    实作

    import { Router , Route , Switch } from "react-router" ;
     
    // using CommonJS modules
    var Router = require ( "react-router" ) . Router ;
    var Route = require ( "react-router" ) . Route ;
    var Switch = require ( "react-router" ) . Switch ;

    优点

    1. 动态路由匹配
    2. 导航时CSS在视图上过渡
    3. 标准化的应用程序结构和行为

    12.扣眼

    Grommet用于创建可响应且可访问的移动优先Web应用程序。 关于此获得Apache 2.0许可JavaScript框架的最好的事情是,它在一个小包装中提供了可访问性,模块化,响应性和主题化。 也许这是它被Netflix,GE,Uber和波音等公司广泛使用的主要原因之一。

    纱线和npm的安装

      $ npm install grommet styled - components -- save 
    

    实作

    "grommet-controls/chartjs" : {
              "transform" : "grommet-controls/es6/chartjs/${member}" ,
              "preventFullImport" : true ,
              "skipDefaultConversion" : true

    优点

    1. 创建一个工具包作为打包交易
    2. 将开放政策发挥到极致
    3. 重组可以帮助影响已建立的组织

    13.温泉UI

    Onsen UI是另一个使用HTML5和JavaScript并提供与Angular,Vue和React集成的移动应用程序开发框架。 它在Apache 2.0下获得许可。

    Onsen提供选项卡,侧面菜单,堆栈导航和其他组件。 关于框架的最好的事情是,它的所有组件都具有iOS和Android Material Design支持以及自动样式,这会根据平台改变应用程序的外观。

    安装

     npm install onsenui 
    

    实作

    ( function ( ) {
        'use strict' ;
        var module = angular. module ( 'app' , [ 'onsen' ] ) ;

        module. controller ( 'AppController' , function ( $scope ) {
          // more to come here
        } ) ;

    } ) ( ) ;

    优点

    1. Onsen UI建立在免费和开源代码之上
    2. 在使用它开发的应用程序上不强制使用任何类型的DRM
    3. 编译JavaScript和HTML5代码
    4. 为最终用户提供原生体验

    您最喜欢的React JavaScript框架是什么? 请在评论中分享它们。

    翻译自: https://opensource.com/article/20/1/react-javascript-frameworks

    ext框架和react框架

    展开全文
  • 前言React框架在现代前端开发的项目中越来越常用,该框架的语法结构也深深的影响着其他框架在设计时的思路和理念。本专栏从这篇文章开始,以零基础出发,一步步总结和讲解React框架的使用。一、搭建React工作环境...
  • react框架简介 什么是React? (What is React?) React is a JavaScript library that aims to simplify development of visual interfaces. React是一个JavaScript库,旨在简化可视界面的开发。 Developed at ...
  • React框架在现代前端开发的项目中越来越常用,该框架的语法结构也深深的影响着其他框架在设计时的思路和理念。本专栏从这篇文章开始,以零基础出发,一步步总结和讲解React框架的使用。 一、搭建React工作环境 首先...
  • 搭建react框架

    2019-10-21 16:48:46
    最近在学习react,首先就是搭建react框架。网上找了些资料,不过比较零散,我做了一下总结。 首先在谷歌浏览器上加载React Developer Tools,可以直接去https://github.com/2442763606/react下载已经打包过的程序。...
  • draft-js - 一个用于构建文本编辑器React框架
  • 主要介绍了JavaScript的React框架入门教程,目前React框架正被Facebook开源极力推广中,此文强烈推荐!需要的朋友可以参考下
  • 了解React框架

    2020-04-17 00:21:29
    React框架 React的起源和发展 起初facebook在建设instagram(图片分享)的时候,因为牵扯到一个东西叫数据流,那为了处理数据流并且还要考虑好性能方面的问题,Facebook开始对市场上的各种前端MVC框架去进行一个...
  • React框架精髓

    千次阅读 2017-09-03 16:27:59
    React 搞了2年多了,对这门框架可谓又爱又恨,它的优势大家都熟知,但是缺点也渐渐暴露,一个大型项目里,配合...下面归纳了一些React框架的核心概念,希望对大家有帮助: React diff 算法React的diff算法是Virtual
  • 主要介绍了JavaScript的React框架的原理,包括其与AngularJS的比较,需要的朋友可以参考下
  • React框架的介绍以及概念,初步认识React框架
  • React框架面试知识

    2020-12-07 11:06:20
    React框架 React的起源和发展 起初facebook在建设instagram(图片分享)的时候,因为牵扯到一个东西叫数据流,那为了处理数据流并且还要考虑好性能方面的问题,Facebook开始对市场上的各种前端MVC框架去进行一个研究...
  • 花了一点时间,了解了下react框架react框架其实更注重原生思路,也偏原生的写法,而vue框架不关注底层原理,只使用方法。 讲效率的话若降低成本可以选vue,如果开发大型项目选react会更灵活。 开始搭建react项目 ...
  • vue react框架对比

    2019-08-14 16:14:37
    vue react框架对比 一、共同点: 都支持组件化,都是数据驱动视图 使用 Virtual DOM (虚拟dom) 提供了响应式(Reactive)和组件化(Composable)的视图组件。 二、不同点: vue本质是MVVM框架,是由MVC...
  • React框架编写hello,world

    2020-05-09 15:44:24
    React框架编写hello,world的两种方式 方法1: 使用CDN(网络加速节点)引入React框架:(此方法一般用于多页面开发)两个链接(React框架中的核心库)如下: · https://unpkg.com/react@16/umd/react.development.js ...
  • React框架作为当前主流的前端开发框架之一,在众多项目中被应用,在最新的工作中遇到很多客户咨询如何在react框架下使用超图的webgl产品,下面做简单的介绍。 #一、创建react工程 (1)npm install -g create-react-...
  • React框架中使用Echarts

    2018-12-09 16:34:35
    React框架中怎么使用Echarts插件 1.要使用该插件肯定要先下载该插件: npm install echarts --save 2.下载完之后就可以项目中使用了,但是在React框架中使用,必须还要下载一个echarts-for-react 库: npm install ...
  • react框架总结

    千次阅读 2018-11-23 14:15:31
    前端框架react) 三大框架的区别: Angular带有比较强的排它性的 React主张是函数式编程的理念,侵入性没有Angular那么强,主要因为它是软性侵入。 Vue 渐进式的 react与vue的对比 可以从redux和vuex中对比 你...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,244
精华内容 7,697
关键字:

react框架