本篇关于组件的诞生，包括函数组件和 class 组件。
简单组件用函数，
复杂组件用 class。
组件的构想
（一）构想1：函数组件
把一堆标签用函数包起来，然后 return 出去，这个函数名就代表了这一堆标签。
定义一个函数
function App() {
return <div className="App">hi</div>;
}
ReactDOM.render(<App />, document.getElementById("root"));
注意：<App /> 等价于 <App></App> 等价于 React.createElement(App)。表示的就是函数App里返回的内容。
那么，给函数传参该怎么做？
（二）构想2
标签就是函数，函数就是对象，标签的属性就是函数的参数。
传参示例
// 使用{props.name}获取传过来的参数
function Box1(props) {
return <div>{props.name}</div>;
}
function App() {
return (
<div className="App">
<Box1 name="jack" />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
但在 React 世界里，函数无法做到修改别人传的参数。
希望既能满足函数的功能，又能局部 render。
于是 class 组件诞生了。
（三）构想三：class 组件
最简单的例子：
class App extends React.Component {
render() {
return (
<div>
app {this.props.name} {this.props.age}
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App name="jack" age={18} />, rootElement);
- 组件如何拥有自己的局部变量？
规定：在class App里使用constructor
constructor(props) {
super();
//局部变量初始化
this.state = {
name: props.name
};
}
- 如何修改参数 / 局部变量？
依然是在class App里
class App extends React.Component {
constructor(props) {
super();
//局部变量初始化
this.state = {
number: 0,
name: props.name,
age: props.age
};
}
//对参数或局部变量的修改只能用 setState
setName() {
this.setState({
name: "rose"
});
}
render() {
return (
<div>
app {this.state.name} {this.state.age}
<button onClick={this.setName.bind(this)}>点我修改名字</button>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App name="jack" age={18} />, rootElement);
新手注意事项：
-
onClick后的函数名不能加上()
加上()的话，就是将函数的返回值结果传给onClick，但onClick要的是函数。 - 组件名首字母必须大写
- 关于
this
React 调用onClick时，是：onClick.call(undefined, 其他函数)
即 React 强制把this变为undefined
该怎么办？
① bind
onClick={this.setName.bind(this)}
② 箭头函数 () => { }
onClick={()=> this.setName()}
- 对参数或局部变量的修改只能用
setState
不能直接修改，如this.state.number += 1(不能这样用)
