首页 > web前端 > html教程 > React入门学习_html/css_WEB-ITnose

React入门学习_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 11:27:24
原创
1185 人浏览过

如何渲染到容器

直接上代码:

    //第一个参数是构造的组件,第二个参数是使用组件的容器    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 的基本语法规则

  • 遇到 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)

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板