函数组件/类定义组件
使用普通的JavaScript函数即可定义一个React组件：
function MyComponent(props) {
return <h1>Props value: {props.value}</h1>;
}
函数接受一个单一的props对象，返回值是React元素，这种方式就是函数定义组件，即组件是一个函数。使用ES6的Class也可以定义一个组件：
class MyComponent extends React.Component {
render() {
return <h1>Props value: {this.props.value}</h1>;
}
}
组件的props与state
pros是一个组件的属性，是只读的，不可以对组件的属性进行写操作。state是一个组件的状态对象，包含了组件在不同生命周期的各种状态数据。注意以下几点：
- 状态不可以直接更新，需要使用setState函数来更新
- 状态只能在构造函数中初始化
- 调用setState更新状态时，提供的对象会被合并到当前组件状态中
- 独立更新
- 浅合并
父组件通过设置子组件的props来向下传递数据，即数据是从上到下单向流动的。
事件处理
几个注意点：
- return false不会阻止默认行为，需要使用以下方式：
function ActionLink(props) {
function handleClick(e) {
e.preventDefault();
console.log('Link has been clicked');
}
return (
<a href='#' onClick={handleClick}>
Click me.
</a>
)
}
- ES6的语法不会将类的方法默认绑定到this上，因此在绑定事件处理函数时需要在构造器中显式声明：
class Toggle extends Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
this.handleClick = this.handleClick.bind(this);
}
handleClick(e) {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
)
}
}
如果不想使用bind，则有两种语法可以支持：
//babel提供的属性初始化语法，适用于不传参数的监听函数
class Toggle extends Component {
handleClick = (e) => {
//...
}
}
//绑定事件回调中的箭头函数
class Toggle extends Component {
render() {
return (
<button onClick={ e => this.handleClick(e) }>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
)
}
}
- 向事件函数传递其他参数并且使用到事件对象时，事件对象必须指定，并且要排在事件监听函数参数的最后：
class Popper extends Component {
construtor(props) {
super(props);
this.state = {name: 'Michael Yan'}
}
popName(name, e) {
e.preventDefault();
console.log(name);
}
render() {
// onClick也可以显式绑定：this.popName.bind(this, this.state.name)
return(
<div>
<p>Welcome:</p>
<a href='https://reactjs.org' onClick={e => this.popName(this.state.name, e)}
</div>
)
}
}
- 不使用事件对象时，两种方式都可以，例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<title>Document</title>
</head>
<body>
<div id='root'></div>
<script type="text/babel">
function toCelsius(fahrenheit) {
return (fahrenheit - 32) * 5 / 9;
}
function toFahrenheit(celsius) {
return (celsius * 9 / 5) + 32;
}
function tryConvert(temperature, convert) {
const input = parseFloat(temperature);
if (Number.isNaN(input)) {
return '';
}
const output = convert(input);
const rounded = Math.round(output * 1000) / 1000;
return rounded.toString();
}
function BoilingVerdict(props) {
if(props.celsius >= 100){
return <p>The water would boil.</p>;
}
return <p>The water would not boil.</p>;
}
const scaleNames = {
c: 'Celsius',
f: 'Fahrenheit'
}
class TemperatureInput extends React.Component {
constructor(props) {
super(props);
}
handleChange = e => {
this.props.onTemperatureChange(e.target.value)
}
render() {
const temperature = this.props.temperature;
const scale = this.props.scale;
return (
<fieldset>
<legend>Enter temperature in {scaleNames[scale]}:</legend>
<input value={temperature}
onChange={this.handleChange} />
</fieldset>
)
}
}
class Calculator extends React.Component {
constructor(props) {
super(props);
this.state = {temperature: '', scale: 'c'}
}
handleCelsiusChange(temperature) {
this.setState({
scale: 'c', temperature
})
}
handleFahrenheitChange(temperature) {
this.setState({
scale: 'f', temperature
})
}
render() {
const scale = this.state.scale
const temperature = this.state.temperature
const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;
return (
<div>
<TemperatureInput
scale="c"
temperature={celsius}
onTemperatureChange={celsius => this.handleCelsiusChange(celsius)}
/>
<TemperatureInput
scale="f"
temperature={fahrenheit}
onTemperatureChange={fahrenheit => this.handleFahrenheitChange(fahrenheit)}
/>
<BoilingVerdict celsius={parseFloat(celsius)} />
</div>
)
}
}
ReactDOM.render(
<Calculator />,
document.getElementById('root')
)
</script>
</body>
</html>
