React系列-组件与Propos

admin 2022年5月24日01:54:56安全开发评论5 views1872字阅读6分14秒阅读模式

基本知识

组件:视图的片段、内部管理数据集合(state); 外部传入配置结合(props)

包含:

  • 视图标记(React的JSX、Vue的template)需要经过转换而成为真实的DOM
  • 事件
  • 数据
  • 逻辑(存储storage、数据结构化处理)
  • 外部的配置

组件渲染过程(掌握)

  • React主动调用Test自定义组件
  • 将属性集合转换对象 props → { title: 'xxx'}
  • 将对象作为props传入组件
  • 替换JSX中的props或者state中的变量
  • ReactDOM将最终的React元素通过一系列操作转换成真实DOM进行渲染

组件调用规范

  • 视图标记:HTML标签 <h1></h1>
  • 大驼峰写法作为一个React元素 <Mytitle />组件 → JSXReact元素
  • 组件转换React元素 React.createElement参考下面代码

使用props(类组件)

class Test extends React.Component {
//属性->配置--> props保存
constructor(props) {
super(props)
}

//数据-->内部数据--->state
state = {
title: this.props.title
}

changeTitle() {
//逻辑
this.setState({
title: 'new title'
})
}

render() {
//视图
return (
<div>
<h1>{this.state.title}</h1>
//如果没有bind(this),那么这里的this指向的是button组件,
//加了之后就变为指向外层的Test组件了
<button onClick={this.changeTitle.bind(this)}>Change</button>
</div>

)
}
}

ReactDOM.render(
<Mytitle title="init title"/>,
document.getElementById('app')
)

使用hooks(函数组件,不写class了)

  • 函数组件一定要是一个纯函数(入参不可修改,能保证绝对的复用性)
  • 注意onClick绑定的不是函数执行setTitle('new title'),而应该是一个匿名函数或者用bind返回一个函数
function Test(props) {
const [title, setTitle] = React.useState(props.title);

return (
<div>
<h1>{title}</h1>
<button onClick={() => setTitle('this is my Component')}>Click</button>
//这里的箭头函数就等于匿名函数: function(){setTitle('this is my Component')}
</div>

)
}


ReactDOM.render(
<Test title='this is a function Component'/>,
document.getElementById('app')
)

属性props与状态state区别

  1. state => 数据池{} 组件内部的管理数据的容器 => 组件内部可读可写(state可读可写)
  2. props => 属性池{} 外部调用组件时传入的属性集合 => 组件内部可读不可写(props只读不可写)

组件外部的数据 -> 组件内部时应该有权限修改的

state与props的结合:
content => props => outer => 外部配置
state => content => default => props.content

//props的只读性
class App extends React.Component {
constructor(props) {
super(props);
console.log(this.props)
}

state = {
content: this.props.content
}

contentChange() {
this.state({
content: '123'
})
}

// contentChange(){
// this.props.content = '123';//错误写法
// }
render() {
return (
<div>
{/*<h1>{this.props.content}</h1> 错误写法*/}
<h1>{this.state.content}</h1>
<button onClick={this.contentChange.bind(this)}>Click</button>
</div>

)
}

}


原文始发于微信公众号(迪哥讲事):React系列-组件与Propos

特别标注: 本站(CN-SEC.COM)所有文章仅供技术研究,若将其信息做其他用途,由用户承担全部法律及连带责任,本站不承担任何法律及连带责任,请遵守中华人民共和国安全法.
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信扫一扫
  • weinxin
admin
  • 本文由 发表于 2022年5月24日01:54:56
  • 转载请保留本文链接(CN-SEC中文网:感谢原作者辛苦付出):
                  React系列-组件与Propos http://cn-sec.com/archives/1043593.html

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: