React学习笔记

从阮老师的13个demo开始

demo

• 说明：
  上面代码一共用了三个库。它们必须首先加载。
  react.js是react的核心库；react-dom.js提供和dom相关的功能；browser.min.js是把jsx语法翻译成js语法用的，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。

ReactDOM.render()

• 说明：ReactDOM.render是React最基本的方法。
• 作用：把模板转为 HTML 语言，并插入指定的 DOM 节点。
  ReactDOM.render(dom节点，容器) ==> 整合在一起，变成完整的html。
• PS: 记住，DOM全大写！！方法名不要写错了！

JSX语法

• 说明： JSX语法允许 HTML 语言直接写在 JavaScript 语言之中，不加任何引号，混合写。
• 语法规则：遇到<就用HTML 规则解析；遇到{就用 JavaScript规则解析；

组件

说明：组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构。叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。

• 注意：
  1、组件的命名必须用大驼峰！不然用不了。
  2、组件里面只允许出现1个html标签！不然会报错。
  3、如果要用到html的class和for属性，要写成className、htmlFor（因为class和for是js的保留字，你们懂得。）

this.props.children

• 说明：代表 组件的 所有子节点
• 注意：
  若当前组件没有子节点则，它就是undefined
  若.....有一个子节点，它就是object
  若.....有多个子节点，它就是array
  我们可以用 React.Children.map 来遍历子节点。用法参考官方文档

组件的PropTypes属性

• 作用：验证 组件实例的属性是否符合要求
• 更多使用查看官方文档

组件的getDefaultProps属性

• 作用：设置组件属性的默认值

this.state

• 说明：描述组件的特性，随着用户互动而产生变化的特性

• 对比this.prop
  表示那些一旦定义，就不再改变的特性
  demo08：
  
  注意：
  第19行的单引号要转义！（被坑过。。）
  onClick是小驼峰写法、

• getInitialState 方法用于定义初始状态,也就是一个对象

• 这个对象可以通过 this.state 属性读取

• this.setState 方法就修改状态值

• 每次修改以后，自动调用 this.render 方法，再次渲染组件。

demo09:


定义一个 onChange 事件的回调函数,event.target.value 读取用户输入的值.