React入门学习_html/css_WEB-ITnose-html教學-PHP中文網

React入门学习_html/css_WEB-ITnose

WBOY

發布： 2016-06-24 11:27:24

原創

1155 人瀏覽過

如何渲染到容器

直接上代码：

    //第一个参数是构造的组件，第二个参数是使用组件的容器    ReactDom.render( <Avatar name='' link='' />, document.getElementByID(''));

登入後複製

render渲染页面将组件放到选定的元素里面

如何定义组件

使用 React.createClass({render:function(){return ( 我是dom元素 )}})构建

    var ProfilePic = React.createClass({          render: function() {            //可以在return前进行相关处理            return (                  <img  src={this.props.link} / alt="React入门学习_html/css_WEB-ITnose" >             );        }    });

登入後複製

1. return()括号中只能填写一个标签，否则报错

2. this.props是 ReactDOM.render中传递的属性，是一个对象对于组件套组件的方式可以传递属性值，如下面例子

组件套组件

    // 渲染到容器    ReactDOM.render(        <Avatar            name="GuoYongfeng"            link="https://avatars2.githubusercontent.com/u/8686869?v=3&s=460"        />,         document.getElementById('example')    );        var Avatar = React.createClass({          render: function() {            return (                  <div>                <ProfilePic link={this.props.link} /> //this.props包含了name和link的属性，同时在ProfilePic组件中可以使用this.props获取link的值                    <ProfileLink name={this.props.name} />                  </div>            );          }    });

登入後複製

如何设置某个变量的初始值

使用 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 (            <div>                <h2>点击下面按钮</h2>                <button onClick={this.handleClick}>点击我</button>                <p>你一共点击了：{this.state.clickCount}</p>            </div>        )    }    });

登入後複製

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='<strong>content</strong>';    React.render(        <div>{content}</div>,        document.body    );        //会直接显示 <strong>content</strong> 相当于ejs中<%= %>

登入後複製

Html默认会对Html文章转义，如何不转义

    var content='<strong>content</strong>';        React.render(        <div dangerouslySetInnerHTML={{__html: content}}></div>,        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-addons

HTML 标签 vs. React 组件

React.render方法可以渲染HTML结构，也可以渲染React组件。 JSX使用首字母大小写来区分是本地组件类还是Html标签。

(1)渲染HTML标签，声明变量采用 首字母小写

    var myDivElement = <div className="foo" />;    React.render(myDivElement, document.body);

登入後複製

(2)渲染React组件，声明变量采用首字母大写

    var MyComponent = React.createClass({/*...*/});    var myElement = <MyComponent someProperty={true} />;    React.render(myElement, document.body);

登入後複製

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(

{ }

)中的 {}可以加入大量的javascript处理函数，如下：

    return (      <ul>        {          this.props.list.map(function (child) {            return <li>{child}</li> //注意这种写法，<li>{child}</li>          })        }      </ul>    );

登入後複製

5.组件可以直接当做Dom标签一样使用，像 button, h1等

6.与Javascript DOM中一样的写法， class对于 className, html对应于 htmlFor；另外，对于非html内置的属性，一定要加上 data-，如

7.JSX 的基本语法规则