React 回顾

  小技巧:如果我们想了解一门技术,不知道如何学习,那就在 BOSS 直聘上,来看看对这门技术的要求

  这篇给大家讲的是 React 1.0 的初始版本,仅仅是让大家有个了解,毕竟回顾历史,我们才能找到他最初的样子;

  React 是 FaceBook 来发明及维护的

  React 的特点:1. jsx 语法,2. ReactDOM.render 3. 组件

  1. React 的模板:jsx 语法

    jsx 语法:允许 html 和 js 混写 ,html 语法该怎么写怎么写,遇到 js 代码,放在 {} 里面;

  2. ReactDOM.render(参数一,参数二)

    参数一:就是我们的组件名称

    参数二:就是我们的 dom 元素

  小提示:如果我们直接用 {数组} ,那么数组中的元素将以字符串的形式展现出来;

  3. React 的组件

    使用 React.createClass({})  生成的组件类

    案例:

      

  1. 每个组件都有独立的 render() 用于输出组件类,里面返回的就是模板

  组件标签可以任意添加属性,在组件类中使用 this.props 获取组件标签上的属性

  注意事项:

    组件类名字的第一个字母必须大写,否则就会报错;

    组件类中的模板只能有一个顶层标签,否则就会报错;

    组件标签上 class 属性,改成 className ,for 属性 改成 htmlfor

  

  children: 组件标签所有子节点;

  js 的注释,在 jsx 中不能使用;

  React.Children 专门遍历子节点的

  this.props.children 的问题

  this.props.children 是组件标签,子节点构成的集合

    当没有子节点,这个值是 undefined

    一个子节点的,这个值是 object

    多个子节点的,这个值是 array

  所以用数组的方法 map 遍历对前两种情况,不起作用,React 专门提供了一个叫 React.Children.map 的方法,用于遍历 this.props.children 组件;

  标签属性 PropTypes 用于验证 标签属性值的类型  

  使用方法:

    

    

原文地址:https://www.cnblogs.com/shangjun6/p/11423090.html

时间: 2024-10-23 18:42:08

React 回顾的相关文章

react回顾

读书就像盖房子,根基要正,刚开始要选一些文风简明的...react 小书 就不错. 创建组件(extends 或是 stateless) 父子组件之间的通信(super) 事件监听(event对象和this) 渲染列表(map) 状态提升(state) 挂载阶段声明周期 更新阶段生命周期(setState) 容器类组件(this.props.children) Proptypys验证 defaultProps 高阶组件(返回新的组件类) getChildContext(childContextT

vue2.x入坑总结—回顾对比angularJS/React的一统

从感性的角度讲,我是不屑于用VUE,觉得react套件用起来更顺手,但是vue现在越来火,所以也不得入vue(杂烩汤)的坑.vue/anguarJS/React,三者对关系现在就是: https://www.zhoulujun.cn/uploadfile/images/2018/0626/20180626214906428779269.jpg 自己ps了下,觉得深有道理,骚年们自己体悟,然后再问军哥^_^ 不过回归真题,看vue还是先了解下https://cdn.zhoulujun.cn/vue

vue2.x入坑总结—回顾对比angularJS/React

从感性的角度讲,我是不屑于用VUE,觉得react套件用起来更顺手,但是vue现在越来火,所以也不得入vue(杂烩汤)的坑.vue/anguarJS/React,三者对关系现在就是: https://www.zhoulujun.cn/uploadfile/images/2018/0626/20180626214906428779269.jpg 自己ps了下,觉得深有道理,骚年们自己体悟,然后再问军哥^_^ 不过回归真题,看vue还是先了解下https://cdn.zhoulujun.cn/vue

重谈react优势——react技术栈回顾

react刚刚推出的时候,讲react优势搜索结果是几十页. 现在,react已经慢慢退火,该用用react技术栈的已经使用上,填过多少坑,加过多少班,血泪控诉也不下千文. 今天,再谈一遍react优势,WTF? React的收益有哪些?React的优势是什么?react和vue.angularJS等其它框架对比优势? 而作为总结回顾.react在工程实践中,带来哪些思想上的质变? virtual dom虚拟DOM概念 它并不直接对DOM进行操作,引入了一个叫做virtual dom的概念,安插

React零碎知识点回顾

1.JSX更接近于js而不是HTML,所以React DOM使用驼峰属性命名规则来取代原来的HTML属性名. 2.JSX的本质是个函数对象.下面两个例子是相似的: const element = ( <h1 className="greeting"> Hello, world! </h1> ); const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!'

2017年 JavaScript 框架回顾 -- React生态系统

前一篇文章中,我们介绍了2017年 JavaScript 框架的整体情况.我们也了解到在众多的前端框架中,目前最为庞大又在快速增长的当属 React 了,本文就来重点介绍 React 的生态系统. 首先看看与 React 有关的软件包的生态系统.在 Facebook 构建 React 之初,就有许多来自于开源社区第三方库的软件包.这些软件包使用 React 补充其它功能,以便提供完整的应用程序解决方案.当然,安装包中也存在着提供相似功能的彼此竞争关系. React Router 丰富的 Web

腾讯优测优分享 | 探索react native首屏渲染最佳实践

腾讯优测是专业的移动云测试平台,旗下的优分享不定时提供大量移动研发及测试相关的干货~此文主要与以下内容相关,希望对大家有帮助. react native给了我们使用javascript开发原生app的能力,在使用react native完成兴趣部落安卓端发现tab改造后,我们开始对由react native实现的界面进行持续优化.目标只有一个,在享受react native带来的新特性的同时,在体验上无限逼近原生实现.作为一名前端开发,本文会从前端角度,探索react native首屏渲染最佳实

细说React(二)

上篇文章主要介绍了React的基本用法,这次将介绍一个React路由组件—react-router. 在 web 应用开发中,路由系统是不可或缺的一部分.在浏览器当前的 URL 发生变化时,路由系统会做出一些响应,用来保证用户界面与 URL 的同步.随着单页应用时代的到来,为之服务的前端路由系统也相继出现了.有一些独立的第三方路由系统,比如 director,代码库也比较轻量.当然,主流的前端框架也都有自己的路由,比如 Backbone.Ember.Angular.React 等等.那 reac

2015前端生态发展回顾

原文:https://github.com/kuitos/kuitos.github.io/issues/32全部文章:https://github.com/kuitos/kuitos.github.io/issues 引用苏宁前端架构师的一个总结作为开篇 编程技术及生态发展的三个阶段 最初的时候人们忙着补全各种API,代表着他们拥有的东西还很匮乏,需要在语言跟基础设施上继续完善 然后就开始各种模式,标志他们做的东西逐渐变大变复杂,需要更好的组织了 然后就是各类分层MVC,MVP,MVVM之类,