环境创建
当我们开始学习react的时候，我们需要准备下面的环境，一个html文件，导入React和ReactDOM库。
<html>
<head>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
/*
ADD REACT CODE HERE
*/
</script>
</body>
</html>
我们还需要导入Babel，因为React需要使用JSX语法，它需要被翻译成Javascript。
注意两件事情
<div>需要有一个id叫做#root. 它是程序的挂载入口点<script type="text/babel">这个标签是我们写JSX代码的地方
组件
在React中，一切东西都是组件，这些组件通常都使用JavaScript的类来实现。你可以创建一个React组件，然后通过继承React.Component这个类。
class Hello extends React.Component {
render() {
return <h1>Hello world!</h1>;
}
}
你可以定义组件，可以定义方法，比如上面的render()方法，在render方法中，你可以返回想要在页面上显示的内容。
ReactDOM.render(
<Hello />,
document.getElementById("root")
);
下面是显示的最终结果
image
处理数据
在React中有两种类型数据，一种是props，一种是state。
state是私有的，你可以在组件内部修改它。
props是外部的，不是有组件自身来控制的，它是由其它组件传递过来的数据控制的。
一个组件可以内部改变state，但是它不可以直接内部修改props
Props
之前我们写的组件是静态的，现在我们想要渲染一些动态的数据，因此我们可以给我们的Hello组件传递一个message的属性用于在内部显示。
ReactDOM.render(
<Hello message="my friend" />,
document.getElementById("root")
);
这个叫做message的属性的值是“my friend”,我们可以在内部通过props属性来获取它。
class Hello extends React.Component {
render() {
return <h1>Hello {this.props.message}!</h1>;
}
}
它最终的渲染结果是
image
我们在`this.props.message两边加上了花括号，因为他是js表达式，用来做转换。
如果我们想要改变组件自己的数据，我们需要使用state.
State
在react中另一种存储数据的方式就是state，它可以被组件直接进行修改。
如果你想要你的数据在你的应用中进行修改，那么你就可以使用组件。
初始化state
在React中，我们想要对组件进行初始化，我们可以在constructor()方法中使用this.state进行赋值。
class Hello extends React.Component {
constructor(){
super();
this.state = {
message: "my friend (from state)!"
};
}
render() {
return <h1>Hello {this.state.message}!</h1>;
}
}
在constructor()中，我们必须要先试用super()方法，这个方法用来进行父组件的初始化。
改变state
改变state的值的时候，我门需要使用this.setState()方法，通过传入新的状态值来修改。
我们可以通过一个内部方法updateMessage来绑定到组件上，然后在updateMessage中调用this.setState()方法。
class Hello extends React.Component {
constructor(){
super();
this.state = {
message: "my friend (from state)!"
};
this.updateMessage = this.updateMessage.bind(this);
}
updateMessage() {
this.setState({
message: "my friend (from changed state)!"
});
}
render() {
return <h1>Hello {this.state.message}!</h1>;
}
}
**我们需要绑定this到updateMessage方法上，否则我们无法在方法中访问 this **
事件处理
在React中，我们可以通过绑定方法来处理事件，比如我们在onClick方法中绑定this.updateMessage方法。
render() {
return (
<div>
<h1>Hello {this.state.message}!</h1>
<button onClick={this.updateMessage}>Click me!</button>
</div>
)
}
下面是完整的React组件代码
class Hello extends React.Component {
constructor(){
super();
this.state = {
message: "my friend (from state)!"
};
this.updateMessage = this.updateMessage.bind(this);
}
updateMessage() {
this.setState({
message: "my friend (from changed state)!"
});
}
render() {
return (
<div>
<h1>Hello {this.state.message}!</h1>
<button onClick={this.updateMessage}/>Click me!</button>
</div>
)
}
}
updateMessage方法调用 this.setState() 改变 this.state.message的值，然后当我们点击按钮的时候，改变的值就会显示出来。
image
通过上面的学习，我们就掌握了一个基本的React工作使用流程。
网友评论