react入门——慕课网笔记

一、 jsx

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

    类似的还有(coffeescript,typescript),最终都被解析为js

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

  3. 通过以下代码渲染dom

1 React.render(<hello name=”world”/>,
2 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.  当其出现在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 

 1 var UserGist = React.createClass({
 2   getInitialState: function() {
 3     return {
 4       username: '',
 5       lastGistUrl: ''
 6     };
 7   },
 8 
 9   componentDidMount: function() {
10     $.get(this.props.source, function(result) {
11       var lastGist = result[0];
12       if (this.isMounted()) {
13         this.setState({
14           username: lastGist.owner.login,
15           lastGistUrl: lastGist.html_url
16         });
17       }
18     }.bind(this));
19   },
20 
21   render: function() {
22     return (
23       <div>
24         {this.state.username}'s last gist is
25         <a href={this.state.lastGistUrl}>here</a>.
26       </div>
27     );
28   }
29 });
30 
31 ReactDOM.render(
32   <UserGist source="https://api.github.com/users/octocat/gists" />,
33   document.body
34 );

 上面代码使用 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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏从零开始学自动化测试

python爬虫beautifulsoup4系列1

前言 以博客园为例,爬取我的博客上首页的发布时间、标题、摘要,本篇先小试牛刀,先了解下它的强大之处,后面讲beautifulsoup4的详细功能。 一、安装...

38211
来自专栏web前端-

rem和em小插曲

1.对em来说,它的大小是相对于父层font-size来改变,但是如果其自身有font-size属性的话,em会优先考虑自身的font-size;

942
来自专栏coder修行路

Go基础--终端操作和文件操作

终端操作 操作终端相关的文件句柄常量 os.Stdin:标准输入 os.Stdout:标准输出 os.Stderr:标准错误输出 关于终端操作的代码例子: pa...

3016
来自专栏web前端教室

[视频直播]本周日先行者视频“React多级菜单

第一个知识点,就是递归。 递归往简单了说,就是函数不断调用自身,同时设定一个退出条件,达成条件就结束调用自身,否则就成无限递归了。 看一小段JSON: { ...

2279
来自专栏LIN_ZONE

Vue 中动态添加class(使用v-bind:class)

今天在Vue中动态修改类名,元素的样式就是不改变,类名也没有加上去,里面的问题具体我还是不太清楚,有可能是因为自己不认真,把 :class= 后面的内容的格式给...

6052
来自专栏柠檬先生

Angularjs基础(十一)

ng-csp       描述:修改内容的安全策略       实例: 修改AngularJS 中关于"eval"的行为方式及内联样式;         ...

2665
来自专栏ytkah

{dede:list}和{dede:arclist}的区别

1.{dede:list}是用于列表页的文章列表调用,通常是用于list_article.htm页面,这个文章列表是可以分页的。 功能说明:表示列表模板里的分...

3616
来自专栏iOSer成长记录

iOS-自定义TextField(解决输入限制,键盘弹出问题)

1482
来自专栏老九学堂

【干货】20K以上的高薪Java必掌握的基础知识点(二)

怎么样!上一期的知识点小伙伴都掌握了多少呢?复习的同时有没有查漏补缺的巩固自己的基础知识呢?今天我们来复习Java基础知识第二期! 61、Math 类提供了许多...

3867
来自专栏吴裕超

认识createDocumentFragment

今天在看vue源码解析时候发现一个api没有见过,一查是原生的,赶紧补漏。 DocumentFragments 是DOM节点。它们不是主DOM树的一部分。通常的...

2757

扫码关注云+社区

领取腾讯云代金券