react.js 学习笔记
Posted 前端胖籽
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react.js 学习笔记相关的知识，希望对你有一定的参考价值。
单向数据流驱动，父节点传递到子节点
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标签里面需要添加
<scripttype="text/babel"></script>
3.JSX支持表达式的运行
只要使用{}就可以了。
<script type="text/babel">
var HelloComponent = React.createClass( { render:function() { return(
<h1>Hello World{this.props.name?this.props.name:"world"}</h1>) } } ); ReactDOM.render(
<HelloComponent name="jspeach" />,document.getElementById('reactContainer') )
</script>
4.巨坑：
react中render的return为什么要加上括号啊？
<scripttype="text/babel">
var HelloComponent=React.createClass({ render:function(){ return
<h1>Hello World</h1>} }); ReactDOM.render(
<HelloComponent/>,document.getElementById('reactContainer') )
</script>
原因：
JavaScript会自动给行末添加分号。如果 return 后面换行不加括号就会变成 return;。
比如返回的是多行，就需要加括号，单行不需要，我在开始的时候还遇到一个问题，返回的内容需要使用一个大的标签将其包裹。
就是这里return后面必须加（）
<scripttype="text/babel">
var HelloComponent=React.createClass({ render:function(){ return(
<h1>HelloWorld</h1>) } }); ReactDOM.render(
<HelloComponent/>,document.getElementById('reactContainer') )
</script>
数组中的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：
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./common/react.js"></script>
<script src="./common/react-dom.js"></script>
<script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
</head>
<body>
<div id="demo">
</div>
<script type="text/babel">
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(
<div style={{opacity:this.state.opacity}}>
<h2>Hello {this.props.name}</h2>
</div>
)
}
});
ReactDOM.render(<Hello name="wowoow"/>,document.getElementById("demo"))
</script>
</body>
</html>
子节点：this.props.children
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="./common/react.js"></script>
<script src="./common/react-dom.js"></script>
<script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
</head>
<body>
<div id="demo">
</div>
<script type="text/babel">
//这里的NoteList一定首字母一定要大写
var NoteList = React.createClass({
render:function(){
return(
<ol>
{React.Children.map(this.props.children,function(child){
//这里一定要有return 而且后面一定要紧跟一个（），不能换行加，不然会不显示
return(<li>{child}</li>)
})}
</ol>
)
}
});
ReactDOM.render(
<NoteList>
<span>lalla</span>
<span>hahah</span>
</NoteList>,document.getElementById("demo")
)
</script>
</body>
</html>
React组件：props 属性验证
1.React.PropTypes提供各种验证器来验证传入数据的有效性
2.getDefaultProps默认值设置
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./common/react.js"></script>
<script src="./common/react-dom.js"></script>
<script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
</head>
<body>
<div id="demo">
</div>
<script type="text/babel">
varMytitle = React.createClass({
//1.propTypes的写法，作为属性时必须要大写
propTypes:{
title:React.PropTypes.string.isRequired,
},
render:function(){
return(
<h2>{this.props.title}</h2>
)
}
})
//验证属性为string类型才可以输出
vardata="1111";
ReactDOM.render(<Mytitle title={data}/>,document.getElementById("demo"))
</script>
</body>
</html>
获取真实的DOM节点
使用ref属性
demo代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./common/react.js"></script>
<script src="./common/react-dom.js"></script>
<script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
</head>
<body>
<div id="demo">
</div>
<script type="text/babel">
varMyCompont = React.createClass({
handleClick:function(){
//绑定一个焦点事件
this.refs.myTextInput.focus()
},
render:function(){
return (
<div>
<input type="text" ref="myTextInput"/>
<input type="button" value="laialaiail" onClick={this.handleClick}/>
</div>
)
}
});
ReactDOM.render(<MyCompont/>,document.getElementById("demo"))
</script>
</body>
</html>
React 表单的使用：
表单的事件响应和bind复用
1.在<label>标签里的for在React里面不能正常使用，需要使用htmlFor
2.React表单bind复用
3.可控组件
Value 必须绑定到state状态上，并且onChange事件实时监控event.target.value才是算可控
4.不可控组件
使用onChange方法，用refs的获取DOM的方法，value的默认值要改成defaultValue,由于这个方法不好复用，所以能不用就不用了。
以上是关于react.js 学习笔记的主要内容，如果未能解决你的问题，请参考以下文章