02-简单的React程序
HelloReact
如题，我们这次需要搭建一个简单的React程序（tips：这里需要一些ES6中class的知识，如果没有了解的话，可能会比较吃力）
如果对完整的源码感兴趣，可以到https://gitee.com/lsq1474521181/react-study这里去下载。
首先，我们需要准备React.js中的一些文件，这些能到官网上下载，当然我们也可以选择CDN引入，下面就是需要引入的文件：
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
版本1
这些文件对导出一些React需要的函数，这里面就有我们需要的一个ReactDOM.render。
(tips：ReactDOM.render就是一个渲染函数，会将我们书写的虚拟DOM转化为真实DOM，这里的虚拟DOM就是指JSX，或者使用React.createElement这个方法创建的对象，这里仅仅知道这个函数起到这样的作用就OK)
ReactDOM.render函数需要传递两个参数，第一个参数是JSX语法书写的对象，第二个参数是我们需要挂载的真实DOM对象。
下面就是一个例子：
ReactDOM.render(<h2>我是一个H2标签</h2>, document.getElementById("app"));
下面的代码，就是一个React的demo：
<!-- 注意，我们在script标签内是没法正常书写JSX语法的，必须添加type=“text/babel” -->
<script type="text/babel">
window.onload = function() {
let message = "Hello World";
function btnClick() {
message = "Hello React";
//点击执行render函数
render();
}
function render() {
// 类似于Vue的mustache语法，不过不是双大括号，是一对大括号
// JSX中规定只能存在一个父节点，这个类似于Vue中的template；
ReactDOM.render(
<div>
<h2>{message}</h2>
<button onClick={btnClick}>改变文本</button>
</div>, document.getElementById("app"));
}
//初始化
render();
}
</script>
虽然代码实现了功能，但是我们发现上面的代码太乱了，这里我们就需要推出version2了；
版本2
这里会需要一些ES6中类的知识。
我们利用面对对象的思想，可以为这个功能封装成一个类，这个类就是我们常常讲的组件，这也是我们组件化思想的一种体现；
首先这个类是需要继承于React.Component
class App extends React.Component {
}
根据ES6中类的要求，我们在继承一个类的时候，在子类的构造函数是需要使用super()方法，来调用父类的构造函数。
class App extends React.Component {
constructor() {
super();
}
}
并且要添加一些状态
constructor() {
super();
// 数据不能直接放在里面，不然没法在修改数据之后刷新的得到修改之后的数据
// this.message = "Hello World";
// 在state中书写，并且使用React提供的方法setState方法才能实现响应式数据
this.state = {
message: "Hello World",
}
}
下面是点击事件
btnClick() {
// this.state.message = "Hello React"; //这样虽然能够修改数据，但是并不会在页面中获得修改之后的数据
// 必须使用React提供的方法，来修改数据
this.setState({
message: "Hello React",
})
}
下面就是要写渲染函数了：
render() {
return (
<div>
<h2>{this.state.message}</h2>
<button onClick={this.btnClick}>改变文本</button>
</div>
);
}
但是这里会报错，会说找不到setState，其实这里不是我们在调用点击事件，而是React在调用点击事件，并且在React内部调用的时候这个this是指向underfined，所以自然也就找不到setState。
要解决这个问题，我们现在先采用一种容易理解的方式就是直接使用bind绑定这个this；
下面就是完整代码：
<body>
<div id="app"></div>
</body>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
//封装App组件
class App extends React.Component {
constructor() {
super();
// 数据不能直接放在里面，不然没法在修改数据之后刷新的得到修改之后的数据
// this.message = "Hello World";
// 在state中书写，并且使用React提供的方法才能实现响应式数据
this.state = {
message: "Hello World",
}
}
btnClick() {
// console.log(this); //underfined 不处理直接使用的话，这里是找不到this的，所以下面的代码就会报错
// this.message = "Hello React";
// this.state.message = "Hello React"; //这样虽然能够修改数据，但是并不会在页面中获得修改之后的数据
// 必须使用React提供的方法，来修改数据
this.setState({
message: "Hello React",
})
}
render() {
// 注意，这里需要使用bind来绑定this的指向
return (
<div>
<h2>{this.state.message}</h2>
<button onClick={this.btnClick.bind(this)}>改变文本</button>
</div>
);
}
}
ReactDOM.render(<App/>, document.getElementById("app"));
</script>
这样我们不光实现了功能，而且还将整个功能抽成了一个小整体，只要想使用直接
浙公网安备 33010602011771号