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.采用