react 学习笔记

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

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{this.props.name?this.props.name:"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( <

div > {

arr

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

组件：

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

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

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

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

下面是一个实例的demo：

varHello=React.createClass({

//初始化状态

getInitialState:function(){

return{

opacity:1.0

}

},

componentDidMount:function() {

setInterval(function(){

varopacity=this.state.opacity;

opacity-=.05;

if(opacity<0.1){

opacity=1.0;

}

//改变状态

this.setState({

opacity:opacity

});

}.bind(this),100);

},

render:function(){

return(

Hello{this.props.name}

)

}

});

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

子节点：this.props.children

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

varNoteList=React.createClass({

render:function(){

return(

{React.Children.map(this.props.children,function(child){

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

return(

{child}

)

})}

)

}

});

ReactDOM.render(

lalla

hahah

,document.getElementById("demo")

)

React组件：props 属性验证

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

2.getDefaultProps默认值设置

varMytitle=React.createClass({

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

propTypes:{

title:React.PropTypes.string.isRequired,

},

render:function(){

return(

{this.props.title}

)

}

})

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

vardata="1111";

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

获取真实的DOM节点

使用ref属性

demo代码：

varMyCompont=React.createClass({

handleClick:function(){

//绑定一个焦点事件

this.refs.myTextInput.focus()

},

render:function(){

return(

)

}

});

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

React表单的使用：

表单的事件响应和bind复用

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

2.React表单bind复用

3.可控组件

Value 必须绑定到state状态上，并且onChange事件实时监控event.target.value才是算可控

4.不可控组件

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