react初始(2)
既然我开始了react的学习,就没有停下来的理由了,我应该很幸运我还有这个时间去学习react,我不认为我聪明,但是我认为我够努力。我先在或许是一个不知道未来该是怎样的人,我们的迷茫和无知源于你不去接受新事物,干程序员这一行,成为大牛很难吗?我觉得不难,咱们这一行又不是在搞研究,就像造房子我们的工人,图纸是他们设计的吗?不是!他们只是按照图纸去盖好一栋漂亮的房子,我们这些程序员就好比民工,JavaScript是不是我们创造的,jQuery不是我们发明的,anjularJs也不是我们创造的,我们只是按照客户的的需求,老板的安排,让我们按照“图纸”去建房子,那地方需要砖块,哪地方需要门窗等等,初级的程序员就像小工,那些大牛只不过多和了几年泥,这个比方或许有差别,并没有表示对他们的不敬,反而也很渴望成为他们那样的人。打这个比方就是让给自己说,图纸不是我们设计的,底层不是我们搭建的,所以有些技术 难吗?恩,有些是挺难的,不过只要付出时间和经理,你也可以成为技术熟练的“民工”,现在讲架构,讲逻辑,讲模块化,我还不能插上什么嘴,who care? Go head!
恩,说了一堆废话,就是给自己打打气,每天给自己定的目标是阅读20篇技术文章,这20篇文章要来至不同的技术网站,每篇文章限定在3-5分钟,不巧我只阅读了12篇今天,如果这样算来,一周,一个月 ,一年下来,将是一个很庞大的数字,或许在 短期内你看不到效果,但是长期下,效果将是巨大的,我姑且先这样给自己打气吧。今天的学习笔记内容是:属性,状态,生命周期函数,声明周期函数。
1.react数据传递的方式:
1—1.采用键值对的形式传递数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="App"></div>
<script src="lib/react.min.js"></script>
<script src="lib/react-dom.min.js"></script>
<script src="lib/browser.min.js"></script>
<script src="style.js"></script>
<script type="text/babel">
var HelloReact = React.createClass({
render : function(){
return(
<div style={style1.style3}>Hello React!<input type="text" value={this.props.name}/></div>
)
}
});
var data = "请输入内容"; //数据在组件尚未初始化的时候传进来,数据的格式可以是字符串、对象、数组
ReactDOM.render(<HelloReact name={data}/>,document.getElementById("App"));
</script>
</body>
</html>
传入的是对象的化具体形式如下:
<script type="text/babel">
var HelloReact = React.createClass({
render : function(){
return(
<div style={style1.style3}>Hello React!<input type="text" value={this.props.name.age}/></div>
)
}
});
var data = {age:"18",sex:"男"};
ReactDOM.render(<HelloReact name={data}/>,document.getElementById("App"));
</script>
如果data的数据形式是数组的话,形式和上面的差不多。
1-2.采用
react初始(2)的更多相关文章
- react初始(1)
前言:react框架的出现是因为Facebook在建设Instagram交流平台的时候要处理大量的数据流,但是行业流行的MVC框架并不能适合Facebook公司的要求,他们就组织了自己的人力来开发re ...
- react初始
一.一些基础概念 1.框架:基于整个项目的 2.库:在某个模块中单独使用,轻量级的 在vue中,DOM的操作时DOM指令调用js 在react中,所有的DOM 渲染都是由JS完成的 组件基于视图 模块 ...
- [转] React同构思想
React比较吸引我的地方在于其客户端-服务端同构特性,服务端-客户端可复用组件,本文来简单介绍下这一架构思想. 出于篇幅原因,本文不会介绍React基础,所以,如果你还不清楚React的state/ ...
- React 同构思想
作者:yangchunwen React比较吸引我的地方在于其客户端-服务端同构特性,服务端-客户端可复用组件,本文来简单介绍下这一架构思想. 出于篇幅原因,本文不会介绍React基础,所以,如果你还 ...
- 搭建一个简单的React项目
我是使用了create-react-app来搭建的基本框架,其中的原理和vue-cli差不多的脚手架.(当然也可以自己配置项目目录,这里我偷了一下懒) npm install -g create-re ...
- 二、React初体验之React组件创建
(中间因为应付各种考试,处理其他事情,隔了好时间没更新,现在终于有时间了,续上!) 本文为React初始体验,因此先不考虑文件如何组织,尽量以最简单的方式让大家了解React其中的原理. 在创建组件( ...
- 【转】Virtual DOM
前言 React 好像已经火了很久很久,以致于我们对于 Virtual DOM 这个词都已经很熟悉了,网上也有非常多的介绍 React.Virtual DOM 的文章.但是直到前不久我专门花时间去学习 ...
- 初学React,setState后获取到的thisstate没变,还是初始state?
问题:(javascript)初学React,setState后获取到的thisstate没变,还是初始state?描述: getInitialState(){ return {data:[]}; } ...
- 初始React Native
1.何是React Native: React-Native是:Facebook 在2015年初React.js技术研讨大会上公布的一个开源项目.支持用开源的JavaScript库React.js来开 ...
随机推荐
- Android课程---序列化与反序列化(转)
ava序列化与反序列化是什么?为什么需要序列化与反序列化?如何实现Java序列化与反序列化?本文围绕这些问题进行了探讨. 1.Java序列化与反序列化 Java序列化是指把Java对象转换为字节序列的 ...
- SQL Server 事件通知(Event notifications)
一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) 基础知识(Rudimentary Knowledge) 事件通知监控DDL(NotifyQue ...
- ABP理论学习之设置管理
返回总目录 本篇目录 介绍 定义设置 获取设置值 更改设置 关于缓存 介绍 每个应用程序都需要存储一些设置信息,然后在应用程序中的某个地方使用这些设置.ABP提供了健壮的基础设施来存储或检索服务端和客 ...
- Javascript基础回顾 之(三) 面向对象
本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...
- 基于多线程的TCP服务器项目【开源】
本文提供一个完整的TCP Server实例,包括动态连接库.单元测试.验收测试.Winform模拟测试.供新手学习,还望老手多提意见. 项目地址:https://tcpserversocket.cod ...
- 完全使用一组 DSL 来操作 Grid 控件
最近尝试了一下将 XtraGrid 的初始化工作封装成内部 DSL,例如一个普通的基础数据的增删改查操作的代码会像下面这样: public partial class UserForm : XtraF ...
- C# 6.0 功能预览 (一)
一.索引的成员和元素初始化 1.1 原始初始化集合 Dictionary 1.2 键值初始化集合 Dictionary 1.3 运算符 $ 初始化集合 Dictionary 二.自动属性的初始化 一不 ...
- Win8换成Win7系统问题小结(修改主板BIOS方法)
问题描述: 笔记本电脑W8系统使用不习惯,想要换成W7系统,但不管是用光盘安装亦或是用U盘安装,在设置系统启动项的时候,选择从光盘启动或从U盘启动,但是回车点了之后没反应. 下面就说说问题的原因及解决 ...
- HTML5的特性,发展,及使用
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #ffffff } p.p2 { margin: 0.0px 0. ...
- ExecuteReader在执行有输出参数的存储过程时拿不到输出参数
异常处理汇总-后端系列 http://www.cnblogs.com/dunitian/p/4523006.html 后期会在博客首发更新:http://dnt.dkill.net/Article/D ...