React组件和组件数据通讯
前言
文章涉及的内容可能不全面，但量不少，须要慢慢看。我花了很长的时间整理，用心分享心得，但愿对你们有所帮助。可是不免会有打字的错误或理解的错误点，但愿发现的能够邮箱告诉我1163675970@qq.com，我会及时的进行修改，只但愿对你有所帮助，谢谢。css
1、写一个时钟
- 用 react 写一个每秒均可以更新一次的时钟
import React from 'react'
import ReactDOM from 'react-dom'
function tick() {
let ele = <h1>{ new Date().toLocaleTimeString() }</h1>
// Objects are not valid as a React child (found: Sun Aug 04 2019 20:34:51 GMT+0800 (中国标准时间)). If you meant to render a collection of children, use an array instead.
// new Date() 是一个对象数据类型的值，React 元素不接收对象做为其子元素
ReactDOM.render(ele, document.querySelector('#root'))
}
tick()
setInterval(tick, 1000) // 若是不包在一个函数中，时钟是不会每秒更新一次
复制代码
可是 React 和 Vue 相同都是数据驱动的，可是这个时候和数据驱动没啥关系，每隔1秒钟从新建立一个 ele，而后再渲染到页面中，视图才发生变化；为了使用数据驱动，咱们须要使用 React 的组件html
2、React 的组件
在 React 组件中，jsx 元素（也称 react 元素）是组件的基本组成单位 在 react 中定义组件有两种方式：react
- 函数（function）定义组件
- 类（class）定义组件
- 定义组件的要求：
-
- 组件的名字首字母必须大写，为了在写 jsx 时区分原生 html 标签
-
- 组件定义后，就能够当作一个标签在 jsx 语法中使用
-
- 若是使用函数定义组件必须返回一个 jsx 元素
2.1 React 的函数组件
react 使用函数定义组件，就是声明一个函数;算法
- 函数接收一个 props 参数；props 是对象，是在渲染或者父组件经过 prop（属性） 传递过来的数据；
- 函数返回一个 jsx 元素，在组件中须要的数据能够经过 props 传入；
// 1. 函数定义组件
function Welcome(props) {
// props 是一个对象，是使用组件时，写在组件行内的属性和属性值组成的；
console.log(data)
return (<div>
<p>{props.data.name}; {props.data.age}</p>
<p>{props.x}</p>
</div>)
}
ReactDOM.render(<Welcome data={{name: 'mabin', age: 18}} x='hahah' />, document.querySelector('#root'));
复制代码
- ReactDOM.render() 会根据第一个参数的类型不一样执行不一样的操做；
-
- 若是是组件，当 render 执行时，首先会把当前组件的行内属性进行打包封装，把其封装成一个对象，把这个对象传给组件函数
-
- 执行组件函数，获取对应的虚拟 DOM 对象
-
- 把虚拟 DOM 转成真实 DOM 对象，而且插入到真实的 DOM 中
2.2 React 的 class 组件
经过 class 定义一个组件bootstrap
- 经过 class 来定义一个组件，须要继承 React 上的 Component 这个类
- 在定义组件上的原型上必须有一个 render 函数，且 render 函数须要返回一个顶级的 jsx 元素
-看🌰数组
class Header extends Component {
constructor () {
super()
}
render () {
// 在 render 函数中经过 this.props 访问 props
return (<div>
{this.props.content}
</div>)
}
}
class Hello extends Component {
constructor (props) {
super()
// 注意在构造函数中不能访问 this.props ，props 会做为形参传入
}
render () {
return (
<div>
<Header content="如今是北京时间：" />
<p>{this.props.data.toLocaleString()}</p>
</div>
)
}
}
// 使用这个组件
ReactDOM.render(<Hello data={new Date()} />, document.getElementById('root'));
复制代码
- ReactDOM.render() 渲染 class 声明的组件过程：
-
- 找到组件对应的类，而后 new 一下这个类，得到这个类的一个实例
-
- 经过实例找到当前类原型上的 render 函数，让 render 执行接收其返回的虚拟 DOM
-
- 将上一步的虚拟 DOM 转换成成真实 DOM ，插入到页面中
2.3 class 和 function 定义的组件有什么不一样
React 也是数据驱动的，当数据发生变化时，视图就会自动发生变化（视图是数据的映射）。组件中的数据有两个来源：props 和 state，其中 props 就是组件被使用时接收的行内属性，是从外部传入的数据，而 state 是组件的私有数据，组件定义时就须要建立；bash
- class 定义的组件中有 this，state，生命周期的钩子，而 function 声明的组件只有 props；
3、数据映射视图
3.1 属性（props）映射视图
属性（prop）也是组件的数据，而视图是数据的映射，当数据发生变化，组件会自动从新渲染dom
-看🌰函数
function Welcome(props) {
return <div>{props.time.toLocaleString()}</div>
}
setInterval(() => {
// 每隔一秒钟 new Date的值会发生变化，即 Welcome 的 time prop 属性发生了变化，而视图自动变化
let now = new Date()
ReactDOM.render(<Welcome time={now} />, document.querySelector('#root'))
}, 1000)
复制代码
-看🌰ui
把数据经过属性传递给组件
function User(props) {
console.log(props)
let { name, age } = props;
return <div>
<p>{name}</p>
<p>{age}</p>
</div>
}
let data = {
name: 'mabin',
age: 18
}
// ReactDOM.render(<User name={data.name} age={data.age} />, document.getElementById('root'))
ReactDOM.render(<User {...data}/>, document.getElementById('root')) // 可使用展开运算符把一个对象传给组件的props，等效于上面的写法
复制代码
3.2 状态（state） 映射视图
react 组件的数据有两个来源：props 和 state 属性（props）：是父组件传递过来的 状态（state）: 是组件本身管控的状态，状态是组件私有的数据
3.2.1 使用 state
- 在 React 中若是使用 state 必须使用 class 建立组件；
- 在 constructor 中初始化一个状态；经过 this.state 赋值一个对象的形式初始化；
- state 中的数据不能够直接修改，若是要更新数据，须要调用 setState 方法 ，setState 方法会进行合并 setState有两种写法 一种是对象一种是函数，若是下一个状态依赖上一个状态，咱们须要使用函数的形式
-
- 函数： this.setState((prevState) => {})
-
- 对象： this.setState({num: 5})
- state 发生改变后触发 render 函数执行更新 DOM
3.2.2 在 react 中绑定事件
- react 绑定事件时，须要使用驼峰命名法的事件名 onClick = { 事件处理函数 }
- 在定义事件函数时，通常把事件函数声明在原型上，而绑定事件时，经过 this.add 访问这个事件函数
- 示例：
咱们来写一个计数器感觉一下 React 的数据驱动
class Count extends Component {
constructor () {
super()
// 在 constructor 中初始化一个状态；经过this.state 赋值一个对象的形式初始化；
// 只有用类声明的组件才有 state
this.state = {
num: 1,
x: 2
}
// this.add = this.add.bind(this)
}
add = () => {
// 在 react 中若是要修改 状态只能经过 this.setState() 方法修改
// setState 方法会进行合并 setState 有两种写法 一种是对象一种是函数
// 1. setState 能够接受一个回调，回调须要 return 一个新的 state 对象，新的对象中只需包含要修改的 属性便可，例如这里咱们要修改 num，return 的对象只须要包含num不用包含 x，react 会自动合并
// 若是下一个状态依赖上一个状态，咱们须要使用函数的形式
/*this.setState((prevState) => {
console.log(prevState); // prevState 以前的状态对象
return {
num: prevState.num + 1
}
})*/
// 2. setState 还能够接受一个对象，对象中须要包含要更新的 state 属性；
this.setState({
num: this.state.num + 1
})
// 咱们发现，咱们更新数据后，页面中使用 num 的地方的值也自动跟着改了；
// react 一样是数据驱动的，当咱们调用 setState 修改 state 时，react 会从新调用 render 函数，获得虚拟DOM 而后调用 DOM-diff 算法，把修改的那一部分从新渲染；
}
render () {
// react 绑定事件时，须要使用驼峰命名法的事件名 onClick = { 事件处理函数 }
// 在定义事件函数时，通常把事件函数声明在原型上，而绑定事件时，经过 this.add 访问这个事件函数
return (<div>
<p>NUM: {this.state.num} </p>
<p>X: {this.state.x} </p>
<button onClick={this.add}>给num加1</button>
</div>)
}
}
ReactDOM.render(<Count />, document.getElementById('root'))
复制代码
4、属性（props） 校验
和 Vue 的 props 同样，React 的 props 一样支持校验；React 的 props 校验须要三方的库 prop-types
4.1 安装 prop-types
yarn add prop-types --save
复制代码
4.2 使用
使用 类型校验须要 在 class 建立组件时建立静态属性 propTypes，值是一个对象，对象的属性是须要校验的 属性，值对应的是校验规则；
- 类型校验看🌰
static propTypes = {
name: PropType.string.isRequired, // 要求 name 是字符串类型 isRequired 表示必传
age: PropType.number.isRequired // 要求 age 是数字类型，isRequired 表示必传
}
复制代码
- 此外，还能够给 prop 设置默认值，一样是经过类的静态属性设置，在建立组件时须要配置 defaultProps 静态属性；该属性的值是一个对象，该对象中属性是要设置默认值的 prop，值是 prop 的默认值
static defaultProps = {
name: '珠峰',
age: 10
}
复制代码
- 完整🌰
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import PropType from 'prop-types'
// React 的props 一样能够校验，可是须要一个第三方的库 prop-types
class User extends Component {
constructor (props) {
super()
console.log(props) // 对象，把行内属性封装到一个对象中
// props.name = 123 // 若是想对 props 进行修改，能够在 constructor 中进行修改
}
static propTypes = {
name: PropType.string.isRequired, // 要求 name 是字符串类型 isRequired 表示必传
age: PropType.number.isRequired // 要求 age 是数字类型，isRequired 表示必传
}
// 给props 设置默认值
static defaultProps = {
name: '京东',
age: 19
}
render () {
return (<div>
<p>{ this.props.name }</p>
<p>{ this.props.age }</p>
</div>)
}
}
let obj = {
name: '张三',
age: 18
};
ReactDOM.render(<User {...obj} />, document.querySelector('#root'));
复制代码
5、父子组件通讯
5.1 父传子
在 React 中，父组件把数据传递给子组件，仍然是经过 props 的方式传递；
-看🌰
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class Header extends Component {
render () {
return (<h1>
<p>{this.props.data}</p>
</h1>)
}
}
// 此时的 Panel 是父组件而 Header 是子组件，父子组件通讯时父传子，仍然是经过 props 传递的
class Panel extends Component {
render () {
return (<div className="container">
<p>{this.props.news}</p>
<Header data={this.props.min} />
</div>)
}
}
let data = {
news: '快下课了',
min: '拖几分钟'
}
ReactDOM.render(<Panel {...data} />, document.getElementById('root'))
复制代码
5.2 子传父
在 React 中子组件修改父组件的方式和 Vue 不一样；子组件若是想修改父组件的数据，父组件在使用子组件的时候，经过 props 传给子组件一个能够修改父组件的方法，当子组件须要修改父组件的数据时，经过 this.props 找到这个方法执行对应的方法
-看🌰
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import 'bootstrap/dist/css/bootstrap.css'
class Panel extends Component {
static defaultProps = {
a: 1
}
constructor () {
super()
this.state = {
color: 'success'
}
}
changeColor = (color) => {
this.setState({
color
})
}
render () {
return (<div className="container">
<div className={`panel panel-${this.state.color}`}>
<div className="panel-heading">
{this.props.head}
</div>
<div className="panel-body">
{this.props.body}
</div>
{/*经过 modifyColor 这个 props 把 Panel 组件的 changeColor 方法传递给 Footer 组件*/}
<Footer type={this.state.color}
modifyColor={this.changeColor} />
</div>
</div>)
}
}
class Footer extends Component {
change = () => {
this.props.modifyColor('danger')
}
render () {
return (<div className="panel-footer">
<button className={`btn btn-${this.props.type}`} onClick={this.change}>变色</button>
</div>)
}
}
ReactDOM.render(<Panel head="头信息" body="信息主体"/>, document.getElementById('root'))
// React 一样是单向数据流，即数据只能经过只能从父组件流向子组件
// 因此子组件若是想修改父组件的数据，父组件在使用子组件的时候，经过props传给子组件一个能够修改父组件的方法，当子组件须要修改父组件的数据时，经过this.props 找到这个方法执行对应的方法就能够了
复制代码
相关文章
- 1. React子组件和父组件通讯
- 2. react 组件通讯
- 3. React/组件通讯
- 4. react组件通讯
- 5. react子组件与父组件通讯
- 6. react组件---组件间通讯
- 7. React（二）组件通讯
- 8. React组件间的通讯
- 9. react组件间通讯
- 10. react父子组件通讯
- 更多相关文章...
- • ASP AdRotator 组件 - ASP 教程
- • ASP Content Linking 组件 - ASP 教程
- • TiDB 在摩拜单车在线数据业务的应用和实践
- • Flink 数据传输及反压详解
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. React子组件和父组件通讯
- 2. react 组件通讯
- 3. React/组件通讯
- 4. react组件通讯
- 5. react子组件与父组件通讯
- 6. react组件---组件间通讯
- 7. React（二）组件通讯
- 8. React组件间的通讯
- 9. react组件间通讯
- 10. react父子组件通讯