react初始(2)

  既然我开始了react的学习,就没有停下来的理由了,我应该很幸运我还有这个时间去学习react,我不认为我聪明,但是我认为我够努力。我先在或许是一个不知道未来该是怎样的人,我们的迷茫和无知源于你不去接受新事物,干程序员这一行,成为大牛很难吗?我觉得不难,咱们这一行又不是在搞研究,就像造房子我们的工人,图纸是他们设计的吗?不是!他们只是按照图纸去盖好一栋漂亮的房子,我们这些程序员就好比民工,JavaScript是不是我们创造的,jQuery不是我们发明的,anjularJs也不是我们创造的,我们只是按照客户的的需求,老板的安排,让我们按照“图纸”去建房子,那地方需要砖块,哪地方需要门窗等等,初级的程序员就像小工,那些大牛只不过多和了几年泥,这个比方或许有差别,并没有表示对他们的不敬,反而也很渴望成为他们那样的人。打这个比方就是让给自己说,图纸不是我们设计的,底层不是我们搭建的,所以有些技术 难吗?恩,有些是挺难的,不过只要付出时间和经理,你也可以成为技术熟练的“民工”,现在讲架构,讲逻辑,讲模块化,我还不能插上什么嘴,who care? Go head!

  恩,说了一堆废话,就是给自己打打气,每天给自己定的目标是阅读20篇技术文章,这20篇文章要来至不同的技术网站,每篇文章限定在3-5分钟,不巧我只阅读了12篇今天,如果这样算来,一周,一个月 ,一年下来,将是一个很庞大的数字,或许在 短期内你看不到效果,但是长期下,效果将是巨大的,我姑且先这样给自己打气吧。今天的学习笔记内容是:属性,状态,生命周期函数,声明周期函数

1.react数据传递的方式:

1—1.采用键值对的形式传递数据

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div id="App"></div>
 9 <script src="lib/react.min.js"></script>
10 <script src="lib/react-dom.min.js"></script>
11 <script src="lib/browser.min.js"></script>
12 <script src="style.js"></script>
13 <script type="text/babel">       
14   var HelloReact = React.createClass({
15       render : function(){
16           return(
17               <div style={style1.style3}>Hello React!<input type="text" value={this.props.name}/></div>
18           )
19       }    
20   });
21   var data = "请输入内容";  //数据在组件尚未初始化的时候传进来,数据的格式可以是字符串、对象、数组
22   ReactDOM.render(<HelloReact name={data}/>,document.getElementById("App"));
23 </script>
24 </body>
25 </html>

 

传入的是对象的化具体形式如下:

 1 <script type="text/babel">       
 2   var HelloReact = React.createClass({
 3       render : function(){
 4           return(
 5               <div style={style1.style3}>Hello React!<input type="text" value={this.props.name.age}/></div>
 6           )
 7       }    
 8   });
 9   var data = {age:"18",sex:""};
10   ReactDOM.render(<HelloReact name={data}/>,document.getElementById("App"));
11 </script>

 

如果data的数据形式是数组的话,形式和上面的差不多。

1-2.采用

posted @ 2016-09-29 22:23  喔喔牛在路上  阅读(264)  评论(0编辑  收藏  举报