React的特征单向数据流学习

目录
  • 正文
    • 状态 => 视图
    • 事件 => 状态改变 => 视图

正文

React推荐one-way单向数据流，注意只是推荐，并不强制，常见有以下两种情况:

  • 状态 => 视图
  • 事件 => 状态改变 => 视图

状态 => 视图

import React from 'react'
const App = () => {
  //设置状态
  const [data, setData] = React.useState('状态 => 视图')

  return (
    <div>
      // 视图显示
      <p>{data}</p>
    </div>
  )
}
export default App

以上可看到，根据提前定义的状态，渲染到Screen上，此时屏幕上显示 "状态 => 视图"

事件 => 状态改变 => 视图

另一种的情况是由外部事件触发状态改变

import React from 'react'
const App = () => {
  const [data, setData] = React.useState('事件 => 状态改变 => 视图')

  return (
    <div>
      <input type="text" onChange={e=>setData(e.target.value)}/>
      <p>{data}</p>
    </div>
  )
}
export default App

通过input获取事件动作，产生状态变更，渲染到Screen上，此时屏幕上显示 "事件 => 状态改变 => 视图"

以上就是React的特征单向数据流学习的详细内容后续希望在自学过程中，陆续分享更多React的特征，更多关于React 特征的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • React特征学习之Form格式示例详解

    React特征学习之Form格式示例详解

    目录 Form 样式 React hook Form 样式 首先来看一个简单Form, 式样如下 import * as React from 'react'; const LoginForm = () => { return ( <form> <div> // Notice: 这里要用htmlFor,相当于id <label htmlFor="email">Email</label> <input id="emai

  • React特征Form 单向数据流示例详解

    React特征Form 单向数据流示例详解

    目录 引言 集中状态管理 双向数据流 那为何不选择双向数据流 小结 引言 今天将之前的内容做个系统整理,结合 React Form 案例, 来了解下为何React推荐单向数据流,如果采用双向管理,可能的问题 (关于React Form案例,可参考相关文章 - 学习React的特征(二) - React Form 集中状态管理 首先来看之前的React Form, 若采用单向数据流 import * as React from 'react'; const Useremail = props =>

  • React特征学习Form数据管理示例详解

    React特征学习Form数据管理示例详解

    目录 Form数据管理 重置Form状态 form验证 小结 Form数据管理 有时会遇到多个位置需要用户输入的情况,若每个状态都配置state或handler会很繁琐,可以尝试下面的方法 import * as React from 'react'; const LoginForm = () => { // 将多个状态合并为对象 const [state, setState] = React.useState({ email: '', password: '', }); // 通过单个hand

  • React的特征单向数据流学习

    目录 正文 状态 => 视图 事件 => 状态改变 => 视图 正文 React推荐one-way单向数据流,注意只是推荐,并不强制,常见有以下两种情况: 状态 => 视图 事件 => 状态改变 => 视图 状态 => 视图 import React from 'react' const App = () => { //设置状态 const [data, setData] = React.useState('状态 => 视图') return ( &l

  • 浅谈Vue的双向绑定和单向数据流冲突吗

    浅谈Vue的双向绑定和单向数据流冲突吗

    目录 前言 单向绑定 vs 双向绑定 单向数据流 vs 双向数据流 为什么说v-model只是语法糖 总结 参考资料 前言 众所周知,Vue中更加推荐单向数据流的状态管理模式(比如Vuex),但Vue同时支持通过v-model实现双向数据绑定.那么问题来了,单项数据流和双向数据绑定的概念,这两种不是相互冲突的吗?即然能用v-model双向数据绑定,不应该就是双向数据流了吗? 本文主要包括以下内容 单向绑定 vs 双向绑定 单向数据流 vs 双向数据流 为什么说v-model只是语法糖 单向绑定

  • 深入理解Vue 单向数据流的原理

    深入理解Vue 单向数据流的原理

    单向数据流是什么 单向数据流指只能从一个方向来修改状态.下图是单向数据流的极简示意: 单向数据流的极简示意 与单向数据流对对应的是双向数据流(也叫双向绑定).在双向数据流中,Model(可以理解为状态的集合) 中可以修改自己或其他Model的状态, 用户的操作(如在输入框中输入内容)也可以修改状态.这使改变一个状态有可能会触发一连串的状态的变化,最后很难预测最终的状态是什么样的.使得代码变得很难调试.如下图所示: 与双向数据流比,在单向数据流中,当你需要修改状态,完全重新开始走一个修改的流程.这

  • 对Angular中单向数据流的深入理解

    对Angular中单向数据流的深入理解

    变更检测 Angular 中,数据是由顶部根节点流向最后的叶子节点,整个数据流是单向,构成一颗单向树. Angular 认为所有的异步操作都有可能会引起模型的变化,引起数据模型发生变化的事件源有: Events:click, mouseover, keyup ... Timers:setInterval.setTimeout XHRs:Ajax(GET.POST ...) Angular 封装 Zone来拦截跟踪异步,一旦发现异步行为,Angular 就会进行变更检测. 因为数据流是单向的,组件

  • Vue props 单向数据流的实现

    1.props通信 注意:DOM模板的驼峰命名props要转为短横分割命名. <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>Vue</title> </head> <body> <div id="app"> <my-component m

  • vue父子组件传值以及单向数据流问题详解

    vue父子组件传值以及单向数据流问题详解

    目录 前言 1.父组件传值给子组件 2.子组件的 props 类型约束问题 (1)构造函数自定义类型 (2)自定义函数自定义类型 3.单向数据流问题 总结 前言 我们知道 vue 中父子组件的核心概念是单向数据流问题,props 是单向传递的.那究竟什么是单向数据流问题,这篇文章来总结一下关于这个知识点的学习笔记. 1.父组件传值给子组件 <div id="app"> <blog-item :title="title"></blog-i

  • vue单向数据流的深入理解

    vue单向数据流的深入理解

    目录 官网解释 单向数据流是什么 示例 a-input原始用法 组件代码 使用场景 总结 官网解释 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行.这样会防止从子组件意外变更父级组件的状态,从而导致你的应用的数据流向难以理解.额外的,每次父级组件发生变更时,子组件中所有的 prop 都将会刷新为最新的值.这意味着你不应该在一个子组件内部改变 prop.如果你这样做了,Vue 会在浏览器的控制台中发出警告. 单向数

  • vue单向数据流的深入讲解

    目录 vue单向数据流 代码示例 特殊情况 注意点: 总结 vue单向数据流 在vue中需要遵循单向数据流原则 在父传子的前提下,父组件的数据发生会通知子组件自动更新 子组件内部,不能直接修改父组件传递过来的props => props是只读的 代码示例 父组件代码: <template> <div style="border: 1px solid #000"> <h1>我是父组件</h1> <Son :info="

  • Vue组件之单向数据流的解决方法

    子组件能够通过自身的props选项获取父组件上的数据,但是在默认情况下,props是单向绑定的---当父组件数据(属性)发生变化的时候会传递给子组件,引起子组件的变化,但不能反过来并且不允许子组件直接改变父组件的数据,会报错的.例如: 也就是说当通过一种方法改变父组件数据的时候,子组件与之相关联的props数据也会发生改变,从而影响子组件,但是子组件直接改变从父组件拿过来的props数据却不能影响父组件的原始数据.也就是说一般情况下只能是"父影响子,而不是子影响父". 两种情况: 1.

随机推荐