Element vs Component
- const div = React.createElement('div',...)
- 这是一个React元素(d小写)
- const Div = ()=>React.createElement('div',...)
- 这是一个React组件(D大写)
什么是组件
- 跟其他物件组合起来的物件就是组件
- 组件并没有明确的定义，靠感觉理解即可
- 就目前而言,一个返回React元素就是组件
- 在Vue里一个构造选项就可以表示一个组件
React两种组件
一、函数组件
function welcome(props){
return <h1>你好，{props.name}</h1>;
}
使用方法:<welcome name="mamami">
二、类组件
class welcome extends React.Component{
render(){
return <h1>你好，{this.props.name}</h1>
}}
使用方法;<welcome name="mamami"/>
会被翻译为什么？？
React.createElement的逻辑
- 如果传入一个字符串'div',则会创建一个'div'
- 如果传入一个函数，则会调用该函数，获取其返回值
- 如果传入一个类,则在类前面加个new(这会导致执行constructor),获取一个组件对象，然后调用对象的render方法，获取返回值。
示例
代码示例
链接
添加props(外部数据)
- 链接
- 类组件直接读取属性this.props.xxx
- 函数组件直接读取参数props.xxx
添加state(外部数据)
链接
- 类组件用this.state读，this.setState写
- 函数组件用useState返回数组，第一项读，第二项写
类组件的注意事项
this.state.n+=1无效吗？？
- 其实n已经改变了,只不过ui不会自动更新而已
- 调用setState才会触发ui更新(异步更新)
- 因为React没有像Vue监听data一样监听state
setState会异步更新ui
- setState之后，state不会立马改变，立马读state会失败
- 更推荐的方式是setState(函数)
this.setState(this.state)不推荐？
- React希望我们不要修改旧的state（不可变数据）
- 常用代码：setState({n:state.n+1})
总结：这是一种理念(函数式),函数组件中注意事项
- 跟类组件类似的地方也要通过setX(新值)来更新ui
- 跟类组件不同的地方，没有this,一律使用参数的和变量
两种变成模型
复杂的state
如果state里不止有n怎么办
总结
