react学习散记

  1. 父组件向子组件通过可以通过props,但是父组件如果想要访问子组件的DOM元素或者子组件本身(虽然这种情况比较少见),可以用refs。
    父组件访问子组件的推荐办法:使用函数
render: function() {
    return (
      <TextInput
        ref={function(input) {
          if (input != null) {
            input.focus();
          }
        }} />
    );
},

这个ref函数在装载后或者消毁时执行,参数input就是TextInput这个组件的实例,这样就可以直接对组件实例本身进行操作。中间的判断是基于组件消毁时为null的情况进行规避,防止内存泄漏。

  1. 表单元素在react中非常特殊,因为要和用户交互相关联,所以和其它HTML元素不太一样。

  2. 在JSX中可以嵌入各种表达式,只需要将它们用{}包起来就行。在JSX中也可以使用各类的JS语法,也必须用{}包起来。大原则就是:使用<>来使用HTML语法,使用{}来调用JS语法。

  3. JSX允许在模板中插入一JS变量,如果该变量是一个数组,就会展开这个数组的所有成员。

<script type="text/babel">
    let names = [
      <h1 key={'a'}>Hello World!</h1>,
      <h2 key={'b'}>React is coool!</h2>,
      <h3 key={'c'}>Now I'm learning it~</h3>
    ]
    ReactDOM.render(
      <div>
        {names}
      </div>,
      document.getElementById('root')
    )
  </script>
  1. 创建组件
  • 创建组建有多种办法,React.createClass()是比较常用的一种ES5方法,除此之外还有class方法和函数式方法。推荐使用class方法。
  • 组建只能包含一个顶层标签。
  • 在组件一级可以加入任意属性,实例化后通过this.props可以使用这些属性。
  • 添加组件属性,for要写成htmlFor,class要写成className,因为保留字的关系。
6. 获取组件的子节点:this.props.children。一般搭配React.Children使用,这是一个例外情况,单独记。
  1. 使用propTypes来验证组件属性的类型
<script type="text/babel">
    let Hello = React.createClass({
      propTypes: {
        name: React.PropTypes.string.isRequired,
        age: React.PropTypes.number.isRequired,
      },

      render: function () {
        return <h1>Hello, {this.props.name}, my age is {this.props.age}</h1>
      }
    })
    ReactDOM.render(
      <Hello name={'小明'} age={11} />,
      document.getElementById('root')
    )
  </script>
  1. JSX模板中样式的写法
style={{opacity: this.state.opacity}}

第一个大括号是JS语法,第二个是对象。

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

在组件装载成功后,发出请求,但是这个请求本身是异步的;有可能组件缷载时请求还没完,所以要在组件将要缷载时废止这个请求。

推荐阅读更多精彩内容

  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 2,550评论 1 18
  • GUIDS 第一章 为什么使用React? React 一个提供了用户接口的JavaScript库。 诞生于Fac...
    jplyue阅读 3,240评论 1 11
  • 深入JSX date:20170412笔记原文其实JSX是React.createElement(componen...
    gaoer1938阅读 7,565评论 2 35
  • 最近看了一本关于学习方法论的书,强调了记笔记和坚持的重要性。这几天也刚好在学习React,所以我打算每天坚持一篇R...
    gaoer1938阅读 1,425评论 0 5
  • 安装: 概述 React起源于FaceBook的内部项目,因为该公司对市场上所有的JavaScript MVC框架...
    姒沝無痕阅读 530评论 0 0
  • 酷暑,丝毫不能减弱我们地热情;出发,齐聚在英气勃发的军营;即便,马上大家就要说再见。 土门,这个僻静质...
    岗上飞阅读 693评论 2 3
  • retina视网膜 display–displays(复数)显示屏 tier层,排,列 Display显示器 Ap...
    小朋友966阅读 115评论 0 0
  • 小懒妞啊阅读 99评论 0 0
  • 刚刚和我的一个高中同学在微信上聊天,我说我觉得你们都考的比我好诶。结果他说,我和你差很多,但是我很会规划生活。然后...
    皇夏柯阅读 4,584评论 0 2