关于命名,组件第一个字母大写,元素小写,
类组件和函数组件
- 元素与组件
const div=React.createElement(‘div’,…)
这是一个React元素(d要小写)
const Div=()=>React.createElement(‘div’,…)
这是一个React组件(D大写) - 什么是组件
能和其他物件组合起来的物件,就是组件
组件并没有明确的意义,
就目前而言,一个返回React元素的函数就是一个组件
在Vue里面一个构造选项就是一个组件 - React函数组件
function Welcome(props){
retuen <h1> hello{props.name}</h1>
}
使用方法 < Welcome name=’Tom’ /> - 类组件
class Welcome extends React.Component{
render(){
return <h1> hello{this.props.name}</h1>
}
}
使用方法 < Welcome name=’Tom’ /> - Welcome会被bable翻译成什么
<div />会被翻译成React.createElement(‘div’)
<Wlecome />会被翻译成React.createElement(Wlecome) - React.createElement的逻辑
如果传入一个字符串’div’会创建一个div
如果传入一个函数,会调用该函数,获取返回值
如果传入的是一个类,则在类前面加new,获取一个组件对象,然后调用组件的runder方法,获取返回值。 - 两种组件的例子
https://codesandbox.io/s/exciting-meninsky-9foduf如何使用state和props
props
类组件直接读取属性this.props.xxx
函数组件直接读取props.xxx
https://codesandbox.io/s/holy-meadow-8vg2ng
state
类组件用this.state读,this.setState写
函数组件用usestate返回函数读写,第一个读,第二个写
写最好用函数
https://codesandbox.io/s/strange-marco-vwt0bx类组件的注意事项
this.state.n+=1是无效的吗
n已经改变了只不过UI没有自动更新
调用setstate才会触发更新
因为reacr里没有对数据进行监听setstate会异步更新
setstate之后会异步更新UI,马上读state数据不会更新
更推荐的方法是setState(函数)获取新值或者做相关的处理,会更方便
this.setState(this.state)不推荐
React希望我们不要修改旧的state
常用代码
setState({n:state.n+1})函数组件的注意事项
和类组件相似的地方
也要通过setX(新值)的方式更新数据
不同
没有this用变量和参数复杂的state
如果数据不知一个
类组件里,更新某个state数据时其他数据会沿用上一次的数据,会数据合并,但只合并一层的数据,
那就使用object.assign()或者【…】操作符
函数组件的setX就完全不会帮忙合并
需要用b[…]去展开如何绑定事件