React学习随笔－读阮一峰教程有感

　　跟随阮一峰的React入门学习，把里面的代码down下来，然后一个个demo去尝试，修改

demo1－React.render

　　1 ReactDOM.render() 方法 接受两个入门参数，第一个是需要插入的节点，第二个插入的父节点

demo2 -JSX

　　1 JSX的基本语法 遇到｛以js语法解析，<以html语法解析

　　2 html的数组会被遍历生成html 如下，会被正确执行，生成两个div　　　　　　

ReactDOM.render(
        <div>
        {
          // names.map(function(name){
          //   return <div>Hi, {name}</div>
          // })
          [<div>wiki</div>,<div>jack</div>]
        }
        </div>,
        document.getElementById('example')
      );

　　3 将里面的数组改成<div>wiki</div><div>jack</div>，会直接报错，也不支持return这样的语句

　　4 即然数组可以，那试试对象－将里面的数据改成{div: 'wiki'} Invariant Violation: Objects are not valid as a React child (found: object with keys {div}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons.  翻译一下吧：{div}这样的object不能作为React的child，必须使用数组或者React构造方法生成的对象。

 demo4 - 组件，上面的使用React的构建对象的方法，

　　1 React.createClass 提供了上面构造方法，可以理解成new 一个ReactChild这样的类，需要实现render这个接口，没有实现的话 Uncaught Error: Invariant Violation: createClass(...): Class specification must implement a `render` method.

　　2 通过<ClassName> 这样的html标签式的调用，同时定义标签上面的属性，会自动带到ClassName.props属性里面，再看看属性里面能不能插入对象属性

　　　　

var HelloMessage = React.createClass({
        render: function() {
          return <h1>Hello {this.props.arr[0]} {this.props.ob.key}</h1>;
        }
      });

      ReactDOM.render(
        <HelloMessage name="John" arr={['a1', 'a2']} ob={{key: 'value'}} />,
        document.getElementById('example')
      );

经过上面代码验证，props属性里面是可以保存对象属性的

　　　3 html标签里面class要写成className， for要写成htmlFor，这个试了下，代码不会生效，但是控制台会有error的提醒

　　　4 上面列出来的代码会变成4个span标签，现在看是会根据html的标签里的空格进行分隔，{}里面的空格不会被分割－－有待后续了解原因

 

 

demo5－pros.children－－闭合标签内部的元素

　　1 一般pros属性和自定义标签的属性一一对应，children属性，遍历this.pros, 如果是html标签  Each child in an array or iterator should have a unique "key" prop. Check the render method of `NotesList`. See https://fb.me/react-warning-keys for more information,大概是缺少data-reactid这个唯一的属性，如果是array数组，依旧有上面的error提示，好吧，改成React.Children.map(this.props.children,function(){.. })方法，如果是{key:'world'}，无论上面哪种遍历都会报错，对象不能ReactElment

 

 

demo5 -propTypes --验证pros对象内属性的类型和合法性

　　1 用控制台查看一下React.proTypes属性，图列在这里了，有什么需要可以去查API或者直接到控制台看方法

　　2 有React自带的，那自然有自定义的验证方法，这个还是上官网看到的，就不详细说了

 

demo7 -- 获取真实dom－this.refs属性　　　　

　　1 React的虚拟dom节点，可以通过给插入进页面的dom元素加入ref属性，返回的是dom对象，而不是像jquery那样封装过的dom对象

　　2 dom的事件属性绑定，直接到属性里面加入onClick方法，可查看官方API－http://facebook.github.io/react/docs/events.html#supported-events，支持的事件比较多，竟然还有copy这样的，猜测大概是通过绑定key-up这样绑定的

 

 

demo8 -- 与用户互动  this.state属性， pros更侧重于静态不变化的数据，state更多用来保存state属性

　　1 事例，修改了state属性之后，用state生成的text字符串也发生了改变，类似angular的双向绑定处理。－－查看实现原理

　　2 通过getInitialState设置初始状态，建议将需要的state在init方法里面，把组件看成的不同表现形式看成不同的状态形式，假设没有getInitialState方法，则会直接报Uncaught TypeError: Cannot read property 'liked' of null ,看来是React生成的对象里面默认没有stat属性

 

 

demo9 -- 与绑定表单事件关联，原来React不能像Angular那样双向绑定

　　1