react入门——慕课网笔记

一、 jsx

　　1. 被称为语法糖：糖衣语法，计算机语言中添加的某种语法，对语言的功能没有影响，更方便程序员使用，增加程序的可读性，降低出错的可能性

　　　　类似的还有（coffeescript，typescript），最终都被解析为js

　　2. 解析jsx的是jsxtransformer.js      指定jsx语法用<text/jsx>

　　3. 通过以下代码渲染dom

React.render(<hello name=”world”/>,
Document.getElementbyId(“container”));

 

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

React.render(<hello name="world"/>,
document.getElementById("container'));

 

　　props是指属性组，this是实例

二、 css

　　1. class

　　　不能在标签上直接写class，需要改为className  (由于此处非真正的dom，class是关键字，不能解析）

 

var Hello = React.createClass({
    render: function(){
        return <div className="redfont">hello {this.props.name}</div>;
    }
});

 

　　2. 内联式

　     不能字符串来表示，需要用样式对象来表示，样式对象是以驼峰标示写法，值为样式值

var Introduce = React.createClass({
    render: function(){
    return <div style={{fontSize:'44px'}}>{this.props.info}</div>;
    }
});

 

　　{}中是执行表达式

　　{{}}内联样式写法

　　驼峰表达式：

render: function(){
    //定义样式内容，样式obj
    var styleObj = {
        color: 'red',
        fontSize:'32px'
    };
    //className代替class
    return <div className="redfont" style={styleObj}>hello {this.props.name}</div>;
}

 

三、React components生命周期

　　 

 

　　1. Mounted是:React Components被render解析生成对应的DOM节点并被插入浏览器的DOM结构的一个过程。

　　2. Update是:一个mounted的React Components被重新render的过程。
　　　对比当前state变化

　　　State

　　　每一个状态react都封装了对应的hook函数~钩子

　　　这种函数是Windows消息处理机制的一部分，通过设置“钩子”，应用程序可以在系统级对所有消息、事件进行过滤，访问在正常情况下无法访问的消息。

　　　对事件进行hook后系统会受到相应通知

　　3.Unmounted是:一个mounted的React Components对应的DOM节点被从DOM结构中移除的这样一个过程。

　　　　　

　　　　

　　　　GetInitialstate

　　　　最终返回一个object其中包含其state

getInitialState:function(){
    alert('init');
    return {
    opacity:1.0
    };
}

 

　　　　This

　　　　是伴随函数生成时的函数内部实例对象

　　　　随着函数运行在不同的环境发生变化

　　　　始终指的是调用函数的那个对象

1. 1. 　当其出现在settimeout函数参数中时，由于函数参数就是一个纯粹的函数调用，不隶属于其他对象，隶属于全局对象，属于global
   2. 　当其出现在setinistialstate这样的函数体内，是作为其所属实例对象的方法来调用，此时this指component实例对象
   3. 　This出现在构造函数：

function test(){
    this.x = 1;
}
var o = new test();

 

　　　　this 指新生成的对象

　　　　　　4.   This出现在apply call bind等方法

　　　　　　　　作用函数的调用对象，指第一个参数

四、 React-component-listener

1. Dom更新

　　传统：直接修改dom的innerhtml或classname

　　事件绑定：Eventlistener

　　React：

　　给组件添加事件绑定（on驼峰式命名方式）

render: function (){
　　return(
　　　　<div>
　　　　　　<button onClick={this.handleClick}>显示|隐藏</button>
　　　　　　<span ref="tip"> 点击测试</span>
　　　　</div>
　　);
}

 

　　添加点击事件：onClick={this.xxxxx}

　　与dom绑定不一样，这里不是真实的dom节点，大小写敏感，通过对象属性定义在对象实例上

var Btnclick = React.createClass({
    handleClick: function(event){
    },

 

　　Event对象是在js原生基础上封装的，因此同时具有原生event方法

 

　　2. 获取组件

　　1）使用‘ref’ property标记组件

　　用ref属性给子组件添加名字，通过this.refs可以索引到子组件

render: function (){
    return(
        <div>
            <button onClick={this.handleClick}>显示|隐藏</button>
            <span ref="tip">    点击测试</span>
        </div>
    );
 }

 

　　this.refs.tip

　　索引到的是react component而不是真实的dom节点

 

　　2）在dom里获得这个节点：

　　使用react提供的方法：ReactDOM.findDOMNode(react component)

五、 补充

　　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
);

 上面代码使用 jQuery 完成 Ajax 请求，这是为了便于说明。React 本身没有任何依赖，完全可以不用jQuery，而使用其他库。

 

六、 注意事项

　　1. 注意react更新后的变化

　　2. 返回虚拟dom时包装为一个div，保证返回一个结果

　　3. 组件的首字母必须大写，不然不报错也不显示

　　4. this.refs.[refName] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错

　　5. this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。

　　6. 用户在表单填入的内容，属于用户跟组件的互动，所以不能用 this.props 读取,而要定义一个 onChange 事件的回调函数，通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况

　　7. 使用map遍历时注意：

　　

　　8. grunt build可以用npm run list 代替

 

 

 

 

 

 

 

以上为慕课网《react入门》总结，所有试验代码地址已上传至git：https://github.com/chaoranwill/chaoran-home/tree/master/react/react-mytest  欢迎fork/clone

视频教程来源：MOOC      其他教程推荐：阮一峰