阅读 38

react初学02(组件)

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')
  • 会被翻译为React.createElement(welcome)
  • 可以用babel online直接翻译看看

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})

总结:这是一种理念(函数式),函数组件中注意事项

  1. 跟类组件类似的地方也要通过setX(新值)来更新ui
  2. 跟类组件不同的地方,没有this,一律使用参数的和变量

两种变成模型

复杂的state

如果state里不止有n怎么办

总结

文章分类
阅读
文章标签