服饰网站模板,长沙诚信做网站,自己做网站和推广,网站主机域名一些概念
组件#xff1a;视图的片段、内部管理数据集合#xff08;state#xff09;外部传入配置结合#xff08;props#xff09;包含#xff1a; 1. 视图标记#xff08;React的JSX、Vue的template#xff09;需要经过转换而成为真实的DOM 事件 数据 逻辑#x…一些概念
组件视图的片段、内部管理数据集合state外部传入配置结合props包含 1. 视图标记React的JSX、Vue的template需要经过转换而成为真实的DOM 事件 数据 逻辑存储storage、数据结构化处理 外部的配置
属性props和数据/状态state的区别
state → 数据池 组件内部的管理数据的容器 组件内部可读写props → 属性池 外部调用组件时传入的属性集合 组件内容只读不可写
组件渲染过程
React主动调用Mytitle自定义组件将属性集合转换对象 props → { title: xxx}将对象作为props传入组件替换JSX中的props或者state中的变量ReactDOM将最终的React元素通过一系列操作转换成真实DOM进行渲染
组件调用规范
视图标记HTML标签 h1/h1大驼峰写法作为一个React元素 Mytitle /组件 → JSX → React元素组件转换React元素 React.createElement参考下面代码
使用props类组件
class Mytitle extends React.Component {constructor(props) {super(props)}state {title: this.props.title}changeTitle() {this.setState({title: new title})}render() {return (divh1{this.state.title}/h1button onClick{this.changeTitle.bind(this)}修改/button/div)}
}
ReactDOM.render(Mytitle titleinit title /,document.getElementById(app)
)使用hooks函数组件不写class了
函数组件一定要是一个纯函数入参不可修改能保证绝对的复用性注意onClick绑定的不是函数执行setTitle(new title)而应该是一个匿名函数或者用bind返回一个函数
function Mytitle(props) {const [title, setTitle] React.useState(props.title)return (divh1{title}/h1button onClick{() setTitle(new title)}修改/button// or// button onClick{setTitle.bind(this, new title)}修改/button/div)
}
ReactDOM.render(Mytitle titleinit title /,document.getElementById(app)
)
// or不写jsx
// ReactDOM.render(
// React.createElement(Mytitle, {
// title: init title
// }),
// document.getElementById(app)
// )使用展开运算符
// 省略
state {title: title,author: author
}
render(){return (Title {...this.state }/)
}
// 相当于 Title titlethis.state.title authorthis.state.author /
