一些概念

组件：视图的片段、内部管理数据集合（state）外部传入配置结合（props）
包含： 1. 视图标记（React的JSX、Vue的template）需要经过转换而成为真实的DOM
1. 事件
1. 数据
1. 逻辑（存储storage、数据结构化处理）
1. 外部的配置

属性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 (<div><h1>{this.state.title}</h1><button onClick={this.changeTitle.bind(this)}>修改</button></div>)}
}
ReactDOM.render(<Mytitle title="init title" />,document.getElementById('app')
)

使用hooks（函数组件，不写class了）

函数组件一定要是一个纯函数（入参不可修改，能保证绝对的复用性）
注意onClick绑定的不是函数执行setTitle('new title')，而应该是一个匿名函数
或者用bind返回一个函数

function Mytitle(props) {const [title, setTitle] = React.useState(props.title)return (<div><h1>{title}</h1><button onClick={() => setTitle('new title')}>修改</button>// or// <button onClick={setTitle.bind(this, 'new title')}>修改</button></div>)
}
ReactDOM.render(<Mytitle title="init 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 title="this.state.title" author="this.state.author" />

04 组件与Props相关推荐

组件间数据交互||父组件向子组件传值-基本使用|| 父组件向子组件传值-props属性名规则
组件间数据交互父组件向子组件传值 1. 组件内部通过props接收传递过来的值 2. 父组件通过属性将值传递给子组件父组件向子组件传值-基本使用 <!DOCTYPE html> < ...
【视频】vue组件之props属性
P9vue组件之props属性 https://www.bilibili.com/video/av91679349?p=9
React组件通信--props
React组件通信 1.props接收数据 //index.js import App from "./App";ReactDOM.render(<App name='传递数 ...
[react] 在React中组件的props改变时更新组件的有哪些方法？
[react] 在React中组件的props改变时更新组件的有哪些方法? 新版用 getDerivedstatefromProps(nextProps){ 业务逻辑} 个人简介我是歌谣,欢迎和大家 ...
React之函数式组件使用props
<!DOCTYPE html> <html> <head> <meat charset="UTF-8"> <title> ...
React简介、虚拟DOM、Diff算法、创建React项目、JSX语法、组件、组件声明方式、组件传值props和state、组件的生命周期
React简介: 前面只是简单介绍移动APP开发,后面还会继续深入介绍移动app开发:其中想要用ReactNative开发出更出色的应用,那么就得学好React,下面将介绍React: React 是 ...
React组件进阶--组件通讯介绍，组件的 props特点，组件通讯的三种方式子到父，父到子，兄弟到兄弟组件，Context，回顾练习
1.组件通讯介绍组件是独立且封闭的单元,默认情况下,只能使用组件自己的数据(state). 在组件化过程中,我们将一个完整的功能拆分成多个组件,以更好的完成整个应用的功能. 而在这个过程中,多个组 ...
Vue组件选项props
前面的话组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props ...
VUE之组件（Props特性深析）
Prop命名风格 [前言] 创建一个博文组件,如果你不能向这个组件传递某一篇博文的标题或内容之类的我们想展示的数据的话,它是没有办法使用的,这也正是 prop 的由来. Prop 是你可以在组件上注册 ...

04 组件与Props

一些概念

属性props和数据/状态state的区别

组件渲染过程

组件调用规范

使用props（类组件）

使用hooks（函数组件，不写class了）

使用展开运算符

04 组件与Props相关推荐

最新文章

热门文章