React入门进修

2024年4月9日 247次阅读 来源: pengj

怎样衬着到容器

直接上代码：

    //第一个参数是组织的组件，第二个参数是运用组件的容器
    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} /> 
            );
        }
    });

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.js5.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.数据的通报都是须要至于{}当中，包含赋值<div {...other} className={fancyClass} />,{}中的变量都是能够经由过程ReactDom.render时传入
2.运用default为前缀，加上Checked,Value等设置默许值，如defaultChecked,defaultValue等，在组件中运用已有的属性。
3.this.refs援用对象鸠合，在Dom元素上添加了ref属性后，就会将这个Dom元素添加到this.refs当中，在页面中这个标签的值是唯一的，this.refs.xxxx.value这类体式格局能够猎取变量的值，ref是一种回调的道理，当子组件的该属性值转变，响应的值会回调给父组件
4.在组件实现时，return(<div>{ }</div>)中的{}能够到场大批的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-，如<div data-custom-attribute="foo" />
`
7.JSX 的基础语法划定规矩

  • 碰到 HTML 标签（以 < 开首），就用 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)

    原文作者：pengj
    原文地址: https://segmentfault.com/a/1190000004410213
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞