React入门学习_html/css_WEB-ITnose
如何渲染到容器
直接上代码：
//第一个参数是构造的组件，第二个参数是使用组件的容器 ReactDom.render(, document.getElementByID(''));
render渲染页面 将组件放到选定的元素里面
如何定义组件
使用 React.createClass({render:function(){return ( 我是dom元素 )}})构建
var ProfilePic = React.createClass({ render: function() { //可以在return前进行相关处理 return ( 
); } });
1. return()括号中只能填写一个标签，否则报错
2. this.props是 ReactDOM.render中传递的属性，是一个对象 对于组件套组件的方式可以传递属性值，如下面例子
组件套组件
// 渲染到容器 ReactDOM.render(, document.getElementById('example') ); var Avatar = React.createClass({ render: function() { return ( ); } });//this.props包含了name和link的属性，同时在ProfilePic组件中可以使用this.props获取link的值
如何设置某个变量的初始值
使用 getInitialState:function(){return {}}声明初始化变量，使用 this.setState({键值对})修改 getInitialState函数中的变量，通过 this.state对象获取属性的值，代码如下：
var ClickApp = React.createClass({ getInitialState:function(){ return { clickCount: 0, } }, handleClick: function(e){ this.setState({ clickCount: this.state.clickCount + 1, }); }, render: function(){ return ( 点击下面按钮
你一共点击了：{this.state.clickCount}
) } }); getInitialState在组件的生命周期内只会运行一次，用来设置组件的初始状态。
this.props.children
this.props对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children属性，它表示组件的所有子节点。
this.props.children的值有三种可能：如果当前组件没有子节点，它就是 undefined;如果有一个子节点，数据类型是 object；如果有多个子节点，数据类型就是 array。React 提供一个工具方法 React.Children来处理 this.props.children。我们可以用 React.Children.map来遍历子节点，而不用担心 this.props.children的数据类型是 undefined还是 object
PropTypes
验证组件提供的参数是否满足要求。如 propTypes: { title: React.PropTypes.string.isRequired },render:function(){return}代码的作用就是说明 title是必须填写的而且为字符串。 使用 getDefaultProps来配置默认的字符串 getDefaultProps : function () { return { title : 'Hello World'};},
组件的生命周期
生命周期分为三个状态：
-
Mounting：已插入真实 DOM
-
Updating：正在被重新渲染
-
Unmounting：已移出真实 DOM
React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。
-
componentWillMount()
-
componentDidMount()
-
componentWillUpdate(object nextProps, object nextState)
-
componentDidUpdate(object prevProps, object prevState)
-
componentWillUnmount()
此外，React 还提供两种特殊状态的处理函数。
-
componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
-
shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用
JSX转化器
1.内嵌的 jsx代码，需要在script标签中要加上 type="text/babel"，并引入 browser.min.js 5.8.24文件，或者使用 bower install babel --save-dev下载babel文件中获取，将 ES6转化为 ES5
2. [已废弃]使用 react-tools模块，将代码转化成线上代码 使用 npm install -g react-tools安装，使用 jsx --watch src/ build/转化
3.可以直接使用 babel转化， babel --presets react [es2015] src --watch --out-dir build，其中 [es2015]是选填项， src是源文件路径 build是编译后的文件路径
4.在 gulp中使用 gulp-react转化
Html转义
对于某些富文本内容，在页面上显示
var content='content'; React.render({content}, document.body ); //会直接显示 content 相当于ejs中
Html默认会对Html文章转义，如何不转义
var content='content'; React.render( , document.body );
CDN文件
1. react
react包括 React.createElement、 React.createClass、 React.Component、 React.PropTypes、 React.Children
react-dom包括 ReactDOM.render、 .unmountComponentAtNode、 .findDOMNode react-dom-server包括 .renderToString和 .renderToStaticMarkup react-with-addonsHTML 标签 vs. React 组件
React.render方法可以渲染HTML结构，也可以渲染React组件。 JSX使用首字母大小写来区分是本地组件类还是Html标签。
(1)渲染HTML标签，声明变量采用 首字母小写
var myDivElement = ; React.render(myDivElement, document.body);
(2)渲染React组件，声明变量采用首字母大写
var MyComponent = React.createClass({/*...*/}); var myElement = Small Tips
1.数据的传递都是需要至于 {}之中，包括赋值
, {}中的变量都是可以通过 ReactDom.render时传入2.使用 default为前缀，加上 Checked, Value等设置默认值，如 defaultChecked, defaultValue等，在组件中使用已有的属性。
3. this.refs引用对象集合，在Dom元素上添加了 ref属性后，就会将这个Dom元素添加到 this.refs之中，在页面中这个标签的值是唯一的， this.refs.xxxx.value这种方式可以获取变量的值， ref是一种回调的原理，当子组件的该属性值改变，相应的值会回调给父组件
4.在组件实现时， return(
return (
- { this.props.list.map(function (child) { return
- {child} //注意这种写法，
- {child} }) }
5.组件可以直接当做Dom标签一样使用，像 button, h1等
6.与Javascript DOM中一样的写法， class对于 className, html对应于 htmlFor；另外，对于非html内置的属性，一定要加上 data-，如`
7.JSX 的基本语法规则
-
遇到 HTML 标签（以
-
遇到代码块（以 { 开头），就用 JavaScript 规则解析
8.this.props 和 this.state不同点
由于 this.props和 this.state都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是, this.props表示那些一旦定义，就不再改变的特性，而 this.state是会随着用户互动而产生变化的特性。
9.组件中样式的写法： style="opacity:{this.state.opacity};"这种方式错误；使用 style={{opacity: this.state.opacity}}这种方式，第一重大括号表示这是 JavaScript 语法，第二重大括号表示样式对象。
10.在 componentDidMount中的设置请求返回的数据需要特别注意只有当数据返回回来才有效，通过 this.isMounted()判读，或者直接使用 promise的 then方法.查看 示例12
参考文档
1.阮一峰老师的 [react-demos](https://github.com/ruanyf/react-demos)