React入门学习_html/css_WEB-ITnose

如何渲染到容器 直接上代码： render渲染页面 将组件放到选定的元素里面 如何定义组件 使用 React.createClass({render:function(){return ( 我是dom元素 )}})构建 1. return()括号中只能填写一个标签，否则报错 2. this.props是 ReactDOM.render中传递的属性，是一个对象 对于组件套组件的方式可以传递属性值，如下面例子 立即学习 “ 前端免费学习笔记（深入） ”； 组件套组件 如何设置某个变量的初始值 使用 getInitialState:function(){return {}}声明初始化变量，使用 this.setState({键值对})修改 getInitialState函数中的变量，通过 this.state对象获取属性的值，代码如下： 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转义 对于某些富文本内容，在页面上显示 Html默认会对Html文章转义，如何不转义 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-addons HTML 标签 vs. React 组件 React.render方法可以渲染HTML结构，也可以渲染React组件。 JSX使用首字母大小写来区分是本地组件类还是Html标签。 (1)渲染HTML标签，声明变量采用 首字母 小写