专栏首页企鹅号快讯react.js 学习笔记

react.js 学习笔记

单向数据流驱动,父节点传递到子节点

react最重要是组件

ReactJS官方地址:https://facebook.github.io/react/

GitHub地址:https://github.com/facebook/react

一、开发环境的搭建:

1、在官网安装react.js

2、在官网安装react-dom.js

3、react.createClass 注册一个组件类

4.ReactDOM.render()将模板转成和html语言,并插入指定的DOM节点,说白了可以理解成就是一个渲染到页面上的功能

二、使用 JSX

Javascript XML 模板

1.需要Babel ES6 进行转换,也可以使用babel核心js库browser.js进行插件的引入

2.坑:在script标签里面需要添加

3.JSX支持表达式的运行

只要使用{}就可以了。

var HelloComponent = React.createClass( { render:function() { return(

Hello World) } } ); ReactDOM.render(

,document.getElementById('reactContainer') )

4.巨坑:

react中render的return为什么要加上括号啊?

var HelloComponent=React.createClass({ render:function(){return

Hello World} }); ReactDOM.render(

,document.getElementById('reactContainer') )

原因:

JavaScript会自动给行末添加分号。如果 return 后面换行不加括号就会变成return;。

比如返回的是多行,就需要加括号,单行不需要,我在开始的时候还遇到一个问题,返回的内容需要使用一个大的标签将其包裹。

就是这里return后面必须加()

var HelloComponent=React.createClass({ render:function(){return(

HelloWorld)} }); ReactDOM.render(

,document.getElementById('reactContainer') )

数组中的JSX

let arr = [

h1 key = "1" > Hello world! < /h1>,

h2 key = "2" > React is awesome < /h2>

];

ReactDOM.render(

arr

}< /div>,document.getElementById('reactContainer') )

组件:

1.明确什么时候使用state(需要在组件里进行变化的时候使用),一定要使用state,不要使用props.

2.明确什么时候使用props(在调用组件或者父组件传递组件里不进行更改的时候)

3.声明周期的使用(放逻辑代码的方法)

4.在render函数里应该是纯粹的组件结构,没有任何逻辑代码,不应该修改组件state,不读写DOM信息,也不与浏览器交互。

下面是一个实例的demo:

DOCTYPE html>

varHello=React.createClass({

//初始化状态

getInitialState:function(){

return{

opacity:1.0

}

},

componentDidMount:function() {

setInterval(function(){

opacity-=.05;

if(opacity

opacity=1.0;

}

//改变状态

this.setState({

opacity:opacity

});

}.bind(this),100);

},

render:function(){

return(

Hello

)

}

});

ReactDOM.render(,document.getElementById("demo"))

DOCTYPE html>

//这里的NoteList一定首字母一定要大写

varNoteList=React.createClass({

render:function(){

return(

//这里一定要有return 而且后面一定要紧跟一个(),不能换行加,不然会不显示

return({child})

})}

)

}

});

ReactDOM.render(

lalla

hahah

,document.getElementById("demo")

)

React组件:props 属性验证

1.React.PropTypes提供各种验证器来验证传入数据的有效性

2.getDefaultProps默认值设置

DOCTYPE html>

varMytitle=React.createClass({

//1.propTypes的写法,作为属性时必须要大写

propTypes:{

},

render:function(){

return(

)

}

})

//验证属性为string类型才可以输出

vardata="1111";

ReactDOM.render(,document.getElementById("demo"))

获取真实的DOM节点

使用ref属性

demo代码:

DOCTYPE html>

varMyCompont=React.createClass({

handleClick:function(){

//绑定一个焦点事件

},

render:function(){

return(

)

}

});

ReactDOM.render(,document.getElementById("demo"))

React表单的使用:

表单的事件响应和bind复用

1.在标签里的for在React里面不能正常使用,需要使用htmlFor

2.React表单bind复用

3.可控组件

4.不可控组件

使用onChange方法,用refs的获取DOM的方法,value的默认值要改成defaultValue,由于这个方法不好复用,所以能不用就不用了。

本文来自企鹅号 - 前端胖籽媒体

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 从源码的角度再看 React JS 中的 setState

    在上一篇手记「深入理解 React JS 中的 setState」中,我们简单地理解了 React 中 setState “诡异”表现的原因。 在这一篇文章中,...

    企鹅号小编
  • MySQL数据库应用总结(六)—MySQL数据库的数据类型和运算符(上)

    SQL语法预览: 创建表字段数据类型:【createtable 表名(字段名称 数据类型); 】 插入字段值:【insert into表名 values(值1,...

    企鹅号小编
  • 重新带你了解React.js

    走进 前端学习 React.js,你了解吗? 在进入react.js的讲解之前吗,我们现在了解下2018年react.js的发展趋势吧。 React Nativ...

    企鹅号小编
  • Web前端----Javascript模块化

    一提到模块化,也许我们首先想到的是做项目的时候进行模块设计,按照功能划分不同的模块,最后通过模块的选择和组合组成最终的产品;那把模块化的思想放到前端页面,js...

    令仔很忙
  • 华为路由交换技术 | 文件传输协议 FTP原理以及配置(穿插讲解华为系统)

    FTP:file translate protocol, FTP是用来传送文件的协议。使用FTP实现远程文件传输的同时,还可以保证数据传输的可靠性和高效性。目前...

    网络技术联盟站
  • 尾调用优化

    [参考链接]((https://www.ruanyifeng.com/blog/2015/04/tail-call.html)

    flytam
  • 从一个穷屌丝到近十亿市值 解析今目标蜕变密码?

    十多年前SaaS厂商一股脑跳海觅食,十多年后死的死残的残,能够上岸的厂商零星点点,阿里,用友等巨头也早早败下阵来,而Xtool,八百客,今目标成为为数不多的幸存...

    人称T客
  • 0769-7.0.3-如何在Kerberos环境下用Ranger完成对Hive的行过滤及列脱敏

    本篇文章主要介绍如何在CDP DC7.0.3集群中使用Ranger在Hive中进行行过滤及列脱敏,行级别的过滤相当于一个强制性的where子句,例如在订单表中,...

    Fayson
  • 原创 | 计算机专业的学生要怎样做才能避免成为低级的码农?

    原文来自知乎问题:计算机科学与技术专业的学生要怎样做才能避免成为低级的码农?虽然是搬运的文章,但是我一般都会修改修改。一方面是觉得当初有些地方表达不是很好,另外...

    TechFlow-承志
  • 指标管理是如何优化目标管理体系的!

    目标管理是管理大师彼得·德鲁克(PeterF.Drucker)于1954年在其名著《管理实践》中提出的。德鲁克认为:先有目标才能确定工作,所以“企业的使命和任务...

    明悦数据

扫码关注云+社区

领取腾讯云代金券