React入门
目前对React已初步入门，因此将自己学习的进行了总结，希望能够能够帮到更多的人，也希望大家一起交流学习进步，深入学习React
现在给大家以简单事例代码直接来看如何理解入门React
1.从实现Hello World入门React
任何一门语言入门，都是以Hello World显示来实现，学习React我们也以Hello World来实现。
HTML静态页面实现：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>Hello World</div>
</body>
</html>
如何通过React来实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 使用React需先引入对应js
react.js 核心库
react-dom.js 提供与DOM相关的功能
browser.js 将JSX语法转换为Javascript语法
-->
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
2.了解JSX（javascript xml）语法
可以理解为React自己定义的一种语言，不影响功能，将HTML与javascript混写
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
<div>
{
names.map(function(name) {
return <div>Hello, {name}!</div>
})
}
</div>,
document.getElementById("container"));
</script>
</body>
</html>
3.认识React的组件component
组件其实很简单，就是类似于将对应的内容封装，然后应用，React的组件创建方法为React.createClass()，以第一步的Hello World为例，提取为组件，然后插入对应的位置
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
// 定义一个组件名，注意组件名首字母要大些
var HelloWorld = React.createClass({
render: function() {
return <h1>Hello Wolrd!</h1>
}
});
ReactDOM.render(
<HelloWorld />,
document.getElementById("container"));
</script>
</body>
</html>
4.有了组件的认识，我们尝试在组件中添加样式、通过组件模板设置属性，在组件中获取等栗子
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
<style type="text/css">
.clr {
color: red;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
var HelloWorld = React.createClass({
render: function() {
return <h1 className="clr">{this.props.name},Hello Wolrd!</h1>
}
});
var HelloWorld1 = React.createClass({
render: function() {
return <h1 style={{color: 'red'}}>{this.props.name},Hello Wolrd!</h1>
}
});
var clr = {
color: 'red'
}
var data = 123;
var HelloWorld2 = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
},
render: function() {
return <h1 style={clr}>{this.props.title},Hello Wolrd!</h1>
}
});
ReactDOM.render(
<div>
<HelloWorld name="Tom"/> <HelloWorld1 name="Jerry"/> <HelloWorld2 title={data} />
</div>,
document.getElementById("container"));
</script>
</body>
</html>
5.举了些栗子，需要了解下组件的声明周期
React有三个周期，Mount、Update、Unmount
通过下面的执行顺序理解
代码执行：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
<style type="text/css">
.clr {
color: red;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
var HelloWorld = React.createClass({
getDefaultProps: function() {
console.log("getDefaultProps");
return {
name: "Jerry"
};
},
getInitialState: function() {
console.log("getInitialState");
return {
opacity: 1.0
};
},
componentWillMount: function() {
console.log("componentWillMount");
},
componentDidMount: function() {
console.log("componentDidMount");
this.timer = setInterval(function() {
var opacity = this.state.opacity;
opacity -= 0.5;
if(opacity< 0.1) {
opacity = 1.0;
}
this.setState({
opacity: opacity
});
}.bind(this), 100);
},
componentWillUpdate: function(nextProps, nextState) {
console.log("componentWillUpdate"+ ":" + nextProps + ":" + nextState);
},
componentDidUpdate: function(prevProps, prevState) {
console.log("componentDidUpdate"+ ":" + prevProps + ":" + prevState);
},
componentWillUnmount: function() {
console.log("componentWillUnmount");
},
render: function() {
console.log("render");
return <h1 className="clr" style={{opacity: this.state.opacity}}>{this.props.name},Hello Wolrd!</h1>
}
});
ReactDOM.render(
<HelloWorld />,
document.getElementById("container"));
</script>
</body>
</html>
执行结果：
此代码在componentDidMount方法通过定时器来调整state变化，执行打印结果：
embedded:5 getDefaultProps
embedded:12 getInitialState
embedded:19 componentWillMount
embedded:49 render
embedded:23 componentDidMount
embedded:37 componentWillUpdate:[object Object]:[object Object]
embedded:49 render
embedded:41 componentDidUpdate:[object Object]:[object Object]
embedded:37 componentWillUpdate:[object Object]:[object Object]
embedded:49 render
embedded:41 componentDidUpdate:[object Object]:[object Object]
embedded:37 componentWillUpdate:[object Object]:[object Object]
embedded:49 render
embedded:41 componentDidUpdate:[object Object]:[object Object]
发现执行顺序：
getDefaultProps ---getInitialState ---componentWillMount ---render ---componentDidMount ---componentWillUpdate ---render ---componentDidUpdate
下面三个事件重复执行，由于state的修改，导致在周期Update过程中重复执行。
6.事件监听
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
<style type="text/css">
.clr {
color: red;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
var Input = React.createClass({
getInitialState: function() {
return {value: 'Hello!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function() {
var value = this.state.value;
return <div>
<input type="text" value={value} onChange={this.handleChange} />
<p>{value}</p>
</div>
}
});
var ButtonEvent = React.createClass({
handleClick: function() {
console.log(this.refs.tip.style.display);
if(this.refs.tip.style.display === 'none') {
this.refs.tip.style.display = 'inline';
} else {
this.refs.tip.style.display = 'none';
}
event.stopPropagation();
event.preventDefault();
},
render: function() {
return <div>
<button onClick={this.handleClick}>显示|隐藏</button><span ref="tip">测试按钮触发事件</span>
</div>
}
});
ReactDOM.render(
<div>
<Input /> <ButtonEvent />
</div>,
document.getElementById("container")
);
</script>
</body>
</html>