react 属性与状态 学习笔记

知识点：
1、react 属性的调用 this.props.被调用的属性名

设置属性的常用方法：
var props = {
one: '123',
two: 321
}
调用这个属性：
<HelloWorld {...props} />

说明：{...props}，这里的三个点，代表props中的所有的属性

react 状态的调用 this.state

this.getInitialState 默认状态的方法；
this.setState 修改状态的方法（经常用到）

this.setState.被修改的值

场景：修改默认属性名称name的值，并显示效果

1、初始化状态，默认状态
getInitialState: function(){
return {
name: 'tim',
}
}

2、改变状态，就会改变默认的值。给这个默认的值添加修改后获取元素的监听事件 event.target 只要默认值被改变，就会获取到这个改变后的值
handChange: function(event){
this.setState({name: event.target.value});
}

3、调用这个已经改变的状态的属性，显示已经改变的状态
render: function(){
return <p> HelloWorld,改变的值为{this.props.name} </p>
}

基础知识点：

必须引入的js:

react.js

JSXTransformer.js

兼容旧版本浏览器（可选）

console-polyfill.js

es5-sham.min.js

es5-shim.min.js

jquery.min.js

基础知识点：

react 的默认的解析数据，生成JSX代码的方法： render: function(){......}

渲染组件的方法： React.render( JSX的代码块 , JSX代码渲染后的存储位置（展示效果的位置）)

JSX(JavaScript Xml) 是在JS中编写XML的语言，官方文档：https//facebook.giuhub.io/jsx/

JSX 首字母大写为自定义组件；首字母小写为DOM元素

JSX 要注意3个点：元素名、子节点、节点属性

所有的html属性与class名称都采用驼峰命名方式：html要写成“htmlFor”; class要写成"className"; 否则会报错

写在style标签中的css样式，在react中要以对象的方式引用 <div style = {style}></div>

{}大括号里不可以使用javascript的语句，但可以使用表达式。用表达式来代替语句。

script标签的type为text/jsx