文档章节

React重点概要

o
 osc_x4h57ch8
发布于 2018/04/24 12:22
字数 2019
阅读 0
收藏 0

精选30+云产品,助力企业轻松上云!>>>

JSX语法:

1.ReactDOM.render:用于将模板转换为HTML语言,并插入指定的DOM节点;

 语法规则:遇到 HTML 标签(以 < 开头),就用 HTML 规则解析,HTML 语言直接写在 JavaScript 语言之中,不加任何引号

<div id="example"></div>
     <script type="text/babel">
        ReactDOM.render(
          <h1>Hello, world!</h1>,
          document.getElementById('example')
        );
     </script>

 

2. 它允许 HTML 与 JavaScript 的混写

    语法规则:遇到代码块(以 { 开头),就用 JavaScript 规则解析

var names = ['Alice', 'Emily', 'Kate'];

    ReactDOM.render(
      <div>
      {
        names.map(function (name) {
          return <div>Hello, {name}!</div>
        })
      }
      </div>,
      document.getElementById('example')
    );

结果为:hello Alice   hello Emily hello Kate

 

3.直接在模板插入 JavaScript 变量,如果这个变量是一个数组,则会展开这个数组的所有成员

var arr = [
      <h1>Hello world!</h1>,
      <h2>React is awesome</h2>,
    ];
    ReactDOM.render(
      <div>{arr}</div>,
      document.getElementById('example')
    );
结果:Hello wold! React is awesome

 


 

二、组件:React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件 

    

1.React.createClass用于生成一个组件类所有组件类都必须有自己的 render 方法,用于输出组件

语法规则:

       1)组件类的第一个字母必须大写,否则会报错:如HelloMessage写成helloMessage就会报错(例1)  

      2)组件类只能包含一个顶层标签(例2)

例1:

var HelloMessage = React.createClass({
      render: function() {
        return <h1>Hello {this.props.name}</h1>;
      }
    });

    ReactDOM.render(
      <HelloMessage name="John" />,
      document.getElementById('example')
    );
 

变量 HelloMessage 就是一个组件类,<HelloMessage /> 会自动生成 HelloMessage 的一个实例 

例2:   

var HelloMessage = React.createClass({
      render: function() {
        return <h1>
          Hello {this.props.name}
        </h1><p>
          some text
        </p>;
      }
    });

 这种写法就会报错:因为有两个顶层标签h1和p

 

3.给组件添加自定义属性:

语法规则:

  1)为组件HelloMessage添加一个name属性

  2)在组件类中使用this.props对象获取属性值

  3)因为class和for是js的保留字,所以  clss需要写成:className,for需要写成:htmlFor

var HelloMessage = React.createClass({
      render: function() {
        return <h1>Hello {this.props.name}</h1>;
      }
    });

    ReactDOM.render(
      <HelloMessage name="John" />,
      document.getElementById('example')
    );

 

三、this.props.children属性:表示组件的所有子节点

var NotesList = React.createClass({
      render: function() {
        return (
          <ol>
          {
            React.Children.map(this.props.children, function (child) {
              return <li>{child}</li>;
            })
          }
          </ol>
        );
      }
    });

    ReactDOM.render(
      <NotesList>
        <span>hello</span>
        <span>world</span>
      </NotesList>,
      document.body
    );
结果:1.hello 2.world

以上为: 通过this.props.children来读取NodeList组件的两个子节点span

注意1:this.props.children有三种可能值:

  1)没有子节点时:undefined

  2) 一个子节点时:Object

  3) 多个子节点时:Array

注意2:可以使用React.Children.map来遍历子节点(更多方法官方文档

 

四、PropTypes属性:就是用来验证组件实例的属性是否符合要求

注:组件的属性可以接受任意值,字符串、对象、函数等等都可以

 

var MyTitle = React.createClass({
      propTypes: {
        title: React.PropTypes.string.isRequired,
      },

      render: function() {
         return <h1> {this.props.title} </h1>;
       }
    });

 

 PropTypes 告诉 React,这个 title 属性是必须的,而且它的值必须是字符串。现在,我们设置 title 属性的值是一个数值就会报错。更多的PropTypes设置看官网

 

五、getDefaultProps方法:可以用来设置组件属性的默认方法

var MyTitle = React.createClass({
  getDefaultProps : function () {
    return {
      title : 'Hello World'
    };
  },

  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});

ReactDOM.render(
  <MyTitle />,
  document.body
);
结果:Hello World

 

六、获取真实的DOM节点:

组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的 DOM 。根据 React 的设计,所有的 DOM 变动,都先在虚拟 DOM 上发生,然后再将实际发生变动的部分,反映在真实 DOM上,这种算法叫做 DOM diff ,它可以极大提高网页的性能表现。

但是,有时需要从组件获取真实 DOM 的节点,这时就要用到 ref 属性。

 

var MyComponent = React.createClass({
      handleClick: function() {
        this.refs.myTextInput.focus();
      },
      render: function() {
        return (
          <div>
            <input type="text" ref="myTextInput" />
            <input type="button" value="Focus the text input" onClick={this.handleClick} />
          </div>
        );
      }
    });

    ReactDOM.render(
      <MyComponent />,
      document.getElementById('example')
    );

上面代码中,组件 MyComponent 的子节点有一个文本输入框,用于获取用户的输入。这时就必须获取真实的 DOM 节点,虚拟 DOM 是拿不到用户输入的。为了做到这一点,文本输入框必须有一个 ref 属性,然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。

需要注意的是,由于 this.refs.[refName] 属性获取的是真实 DOM ,所以必须等到虚拟 DOM 插入文档以后,才能使用这个属性,否则会报错。上面代码中,通过为组件指定 Click 事件的回调函数,确保了只有等到真实 DOM 发生 Click 事件之后,才会读取 this.refs.[refName] 属性。

React 组件支持很多事件,除了 Click 事件以外,还有 KeyDownCopyScroll

 

七、this.state:将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI

var LikeButton = React.createClass({
      getInitialState: function() {
        return {liked: false};
      },
      handleClick: function(event) {
        this.setState({liked: !this.state.liked});
      },
      render: function() {
        var text = this.state.liked ? 'like' : 'haven\'t liked';
        return (
          <p onClick={this.handleClick}>
            You {text} this. Click to toggle.
          </p>
        );
      }
    });

    ReactDOM.render(
      <LikeButton />,
      document.getElementById('example')
    );

getInitialState:方法用于定义初始状态,也就是一个对象。

this.state:读取getInitialState返回的状态值  如:liked:false。

this.setState:修改状态值,每次修改以后自动调用this.render方法,在此渲染组件。

this.pros和this.setState的区别:

   1)this.props:用于一旦定义就不再改变的特性;

   2)this.setState:随着用户互动而产生变化的特性

 

九、表单:用户再表单输入的内容,属于用户跟组件互动,所以不能用this.props读取

 

var Input = React.createClass({
      getInitialState: function() {
        return {value: 'Hello!'};
      },
      handleChange: function(event) {
        this.setState({value: event.target.value});
      },
      render: function () {
        var value = this.state.value;
        return (
          <div>
            <input type="text" value={value} onChange={this.handleChange} />
            <p>{value}</p>
          </div>
        );
      }
    });

    ReactDOM.render(<Input/>, document.body);

 

 onChange:事件的回调函数

event.target.value:读取用户输入的值

注:像textarea、select、redio都属于这种情况

 

十:组件的声明周期:

1.组件的生命周期分为三个状态:

  Mounting:以插入真实DOM

  Updating:正在被重新渲染

  Unmounting:已移除真实DOM

2.React为每个状态都提供了两种处理函数:

  wil:函数正在进入状态之前调用

  did:函数在进入状态之后调用

3.三种状态共计五种处理函数:

  componentWillMount()

  componentDidMount()

  componentWillUpdate(object nextProps,object nextState)

  componentDidUpdate(object prevProps,object prevState)

  componentWillUnmount()

4.特殊状态:

  componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用

  shouldComponentUpdate(object nectProps,object nextState):组件判断是否重新渲染时调用

var Hello = React.createClass({
  getInitialState: function () {
    return {
      opacity: 1.0
    };
  },

  componentDidMount: function () {
    this.timer = setInterval(function () {
      var opacity = this.state.opacity;
      opacity -= .05;
      if (opacity < 0.1) {
        opacity = 1.0;
      }
      this.setState({
        opacity: opacity
      });
    }.bind(this), 100);
  },

  render: function () {
    return (
      <div style={{opacity: this.state.opacity}}>
        Hello {this.props.name}
      </div>
    );
  }
});

ReactDOM.render(
  <Hello name="world"/>,
  document.body
);

 注意:1)style的格式:style={{opacity: this.state.opacity}}

    2) 注意setinterval()方法中,回调函数一定要加.bind(this)方法,原因是:在setInterval()中定义的回调函数,是在同步代码执行完后,随着事件触发来异步执行的,此时函数的上下文Context已经由定义该函数的Script文件变为全局变量,如果不通过bind(this)来指定由组件实例作为上下文的话,回调函数中的this会指向全局变量中的Window变量,显然不是我们想要的结果。

 

十一、Ajax

组件的数据来源,通常是通过 Ajax 请求从服务器获取,可以使用 componentDidMount 方法设置 Ajax 请求,等到请求成功,再用 this.setState 方法重新渲染 UI

 

var UserGist = React.createClass({
      getInitialState: function() {
        return {
          username: '',
          lastGistUrl: ''
        };
      },

      componentDidMount: function() {
        $.get(this.props.source, function(result) {
          var lastGist = result[0];
          if (this.isMounted()) {
            this.setState({
              username: lastGist.owner.login,
              lastGistUrl: lastGist.html_url
            });
          }
        }.bind(this));
      },

      render: function() {
        return (
          <div>
            {this.state.username}'s last gist is
            <a href={this.state.lastGistUrl}>here</a>.
          </div>
        );
      }
    });

    ReactDOM.render(
      <UserGist source="https://api.github.com/users/octocat/gists" />,
      document.body
    );

 我们甚至可以把一个Promise对象传入组件

var RepoList = React.createClass({
      getInitialState: function() {
        return { loading: true, error: null, data: null};
      },

      componentDidMount() {
        this.props.promise.then(
          value => this.setState({loading: false, data: value}),
          error => this.setState({loading: false, error: error}));
      },

      render: function() {
        if (this.state.loading) {
          return <span>Loading...</span>;
        }
        else if (this.state.error !== null) {
          return <span>Error: {this.state.error.message}</span>;
        }
        else {
          var repos = this.state.data.items;
          var repoList = repos.map(function (repo) {
            return (
              <li>
                <a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}
              </li>
            );
          });
          return (
            <main>
              <h1>Most Popular JavaScript Projects in Github</h1>
              <ol>{repoList}</ol>
            </main>
          );
        }
      }
    });


ReactDOM.render(
  <RepoList
    promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')}
  />,
  document.body
);

 如果Promise对象正在抓取数据(pending状态),组件显示"正在加载";如果Promise对象报错(rejected状态),组件显示报错信息;如果Promise对象抓取数据成功(fulfilled状态),组件显示获取的数据

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

eclipse汉化教程(附安装包)

eclipse汉化包安装步骤 一、去官网或者在本站下载Eclipse(不管是什么版,中文设置的方法都是差不多的,所以说我们汉化的教程不管未来更新多少个版本都是一样的) 官方下载地址:www.eclipse.o...

树懒宝宝
33分钟前
22
0
CocosCreator之分层管理的ListView

前言 进入公众号回复listview即可获得demo的git地址。 之前写的一篇文章《Creator之ScrollView那些事》中提到了官方Demo中提供的ListViewCtl,只是实现了纵向滑动,没有实现横向滑动。并且建议...

陈广文
36分钟前
24
0
在CSS Flexbox中,为什么没有“ justify-items”和“ justify-self”属性?

问题: Consider the main axis and cross axis of a flex container: 考虑伸缩容器的主轴和横轴: Source: W3C 资料来源: W3C To align flex items along the main axis there is one pro......

法国红酒甜
38分钟前
17
0
搜索解决方案 - ElasticSearch/Solr/Lucene

搜索解决方案 - ElasticSearch/Solr/Lucene 1. 什么是 ElasticSearch ElasticSearch 是一个基于 Lucene 的搜素服务器 是一个分布式、高扩展、实时的搜素与数据分析引擎 基于 RESTful web 接口...

夙梦o
41分钟前
26
0
设计模式学习笔记(五):工厂方法模式

1 前言 尽管简单工厂模式实现了对象的创建和使用分离,但是仍然存在以下两个问题: 工厂类过于庞大,包含了大量的判断代码,导致维护和测试难度增大 系统扩展不灵活,如果增加了新的产品类型...

氷泠
45分钟前
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部