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 条评论
登录 后参与评论

相关文章

来自专栏DannyHoo的专栏

两步设置状态栏字体颜色

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

2701
来自专栏cnblogs

DOM事件第一弹

     近期温习了部分w3c上关于DOM事件的规范,发现以前有些模糊的概念更加清晰,以及受到罗胖(罗辑思维)的影响,很是想分享自己的了解的东西,希望大家给予指...

2046
来自专栏技术墨客

React Forwarding高阶组件传递Refs

通常情况下,我们想获取一个组建或则一个HTML元素的实例通过 Ref特性 就可以实现,但是某些时候我们需要在子父级组建中传递使用实例,Forwarding Re...

1124
来自专栏陈纪庚

手把手教你实现一个引导动画

最近看了一些文章,知道了实现引导动画的基本原理,所以决定来自己亲手做一个通用的引导动画类。

1251
来自专栏向治洪

React Native之ViewPagerAndroid 组件

概述 今天我们来讲解一下关于 ViewPager 的使用,它是一个允许子视图左右滚动翻页的容器。我们知道在Android开发中系统有ViewPager这个组件,...

2118
来自专栏林德熙的博客

WPF 如何画出1像素的线

如何有人告诉你,请你画出1像素的线,是不是觉得很简单,实际上在 WPF 上还是比较难的。 本文告诉大家,如何让画出的线不模糊

2481
来自专栏守候书阁

[边学边练]用简单实例学习React

学习之路不可停止,最近在玩 React。也动手尝试写了一个实例。借此整理总结下初步学习 React 的一些基础知识。因为这几天比较忙,没那么多时间,所以实例和文...

1556
来自专栏HT

基于HT for Web矢量实现HTML5文件上传进度条

在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传、上传成功了没有,所以今天给大家介绍的内容是通过HT...

2139
来自专栏前端新视界

Angular CLI 升级 6.0 之后遇到的问题

2552
来自专栏DannyHoo的专栏

iOS中在系统相册中创建自己App的自定义相册

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

2331

扫码关注云+社区

领取腾讯云代金券