React 笔记

1、ReactDOM.render() //React最基本的方法，用于将模板转为HTML，并插入制定的DOM节点。


2、JSX语法 //允许HTML与JavaScript混着写，HTML标签可以直接写到javascript中
//基本语法规则为，遇到 ‘ < ’ 则以html解析，遇到 ‘ { ’则以JS解析
//模板中可以直接插入js变量，如果变量是数组，就会展开数组，将数组所有内容添加到模板


3、组件 //用React.createClass 方法创建一个组件类，然后可以将这个组件像插入html标签一样直接用，
//但是组件只能包含一个顶层标签
//插入中组件类第一个字母必须大写，否则会报错。所有的组件类必须有自己的render方法，用于输出组件
//组件可以任意加入属性，属性可以在组件类的 this.props 对象上获取
//添加属性时注意js的保留字，比如，class 应写为 className， for 写为 htmlFor


4、this.props.children //this.props 对象的属性与组件属性一一对应，但此对象表示组件中所有的子节点
//这个属性值有三种情况，如果当前组件没有节点，值为undefined，有一个子节点，就是object，
//多个子节点就是 array 。React.Children.map 遍历子节点，无论它的数据类型是恶化那么


5、PropTypes //此属性用来验证组件实例的属性是否符合要求。


6、getDefaultProps //可以设置组件属性的默认值


7、ref 属性 //从组件获取真实的 DOM 节点
//React 的设计就是所有的的DOM操作都是虚拟的，只有插入文档，才会变成真的DOM。
//比如当需要获取用户输入内容，那么 input 标签需要有 ref 属性，用this.refs.[refName] 返回真实节点
//值得注意的一点就是，在获取真是DOM 必须在等到虚拟DOM插入文档之后


8、this.state //有一个默认值，用户有动作之后会根据用户变化状态，this.setState 方法修改状态值
//每次修改后自动调用 this.render方法，重新渲染组件
//与 this.props 的区别，props的值一旦定义就不会改变，而state 随着用户改变


9、表单 //获取用户输入的内容，所以不能用this.props 读取，input、textarea、select、radio等元素
//必须定义一个回调函数来通过 event.target.state 读取用户值。


10、组件生命周期 //组件生命周期的三个状态：
// Mounting:已经插入真是DOM Updating: 正在被中心渲染 Unmounting: 已移出真实 DOM
//每个状态两种处理函数 will 函数进入该状态之前调用， did 进入该状态后调用
//componentWillMount()
//componentDidMount()
//componentWillUpdate(object nextProps, object nextState)
//componentDidUpdate(object prevProps, object prevState)
//componentWillUnmount()
//componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
/ /shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

11、Ajax //组件的数据来源，通常是通过 Ajax 请求从服务器获取，
//可以使用 componentDidMount 方法设置 Ajax 请求，等到请求成功，再用 this.setState方法重新渲染