认识React

noONE 发布于2019-08-19 18:01 / 1200人阅读

摘要：认识准备写有两种方式通过通过写起来感觉会更方便，但就需要用进行编译了。组件的两个重要对象就是一个组件模板的数据对象。当一个组件进行了登录之后，应该通知其他需要更新登录信息的组件。

认识React 准备 babel-cli

写 React 有两种方式：

通过 jsx

通过 js

jsx 写起来感觉会更方便，但就需要用babel进行编译了。

用babel编译 React 的 jsx 有三种方法( 关于 babel 的具体使用方法好像还是有很多疑问的。以后会再折腾下)

CLI工具编译

Node.js运行时编译

浏览器（客户端）运行时编译

这样我打算用 babel-cli 进行实时编译，会比较方便。

安装

将工具全局安装了：

$ [sudo] npm i -gd babel-cli

插件多带带安装：

$ npm i -d babel-preset-react

使用

ps:我这里之前说错了

这里有个坑，在 windows 系统的话，可以直接babel --presets react，但在 os x 会报错，要直接直接指定绝对路径/usr/local/lib/node_modules/babel-preset-react，

babel-cli 的 --presets 参数是会向父级目录寻找 node_module 里面的 babel-prest-xxx 插件，如果没有找到，就会相对于当前目录路径寻找插件。

除此之外，你也可以写成绝对路径的插件地址。

在多带带安装了插件后，你就可以不用写绝对路径地址了。

$ babel --presets react jsx --watch --out-dir build

如果不想每次敲命令，可以在项目目录（就是敲babel命令的目录）中新建一个.babelrc文件:

{
    "presets": ["react"]
}

这样敲命令的时候就可以不要带上--presets参数了。

$ babel jsx --watch --out-dir build

jsx是需要编译的文件夹，build是编译后产出的文件夹。

使用 React v0.14.x




  
  Document

ps：官网的示例中，react 核心 js 是放在标签里面的，因为这样的话，在最后渲染 DOM 的时候就可以直接选择在标签里面了。不然就要像我这样，在标签里面给个节点供 react 进行渲染。

组件 组件概念

先来个 Input 组件。

var Input = React.createClass({
  render: function(){
    return(
      
        四月是誰的谎言
        
      
    )
  }
})

通过 Reac.createClass 创建的就是组件了。
rander 函数 return 的东西可以称作模板。
每个组件都是一个树形结构（有父级节点和子节点，也就是不能同时存在两个顶级节点，react 是不允许的）。
在 React 里面就是一个个组件组成的，组合在一起就也是一个树形结构。

组件的渲染

ReactDOM.render(
  ,
  document.getElementById("JBody")
);

调用 ReactDOM.render 方法进行渲染，第一个参数是组件了，第二个是装载该组件的容器。
同样的，第一个参数只支持树形结构，也就是只有一个顶级节点。

组件的两个重要对象 props

props 就是一个组件模板的数据对象。里面储存着静态的数据，也就是只在调用时赋值，之后如果有数据的改变也不会再次进行模板的渲染了。

props 的使用:

var Input = React.createClass({
  render: function(){
    return(
      // 使用 props
      
        四月是誰的谎言
        
      
    )
  }
})

ReactDOM.render(
  , // 赋值 props
  document.getElementById("JBody")
)

state

state 跟 props 是相对的。
state 是动态的数据对象，也就是可以任何时候进行赋值，之后如果有数据的改变会进行模板的再次渲染（这里渲染的话就涉及到了 react 的 virtual DOM）了。

state 的使用：
这里定义个列表组件Items

var Items = React.createClass({
  getInitialState: function() {
    return {
      data: [12312,1231,45,51512312,2131]
    }
  },
  render: function(){
    return(
      
        {this.state.data.map((value,i) => {
          return {value}
        })}
      
    )
  }
})

getInitialState 用来定义 state 的初始数据。

还可以在组件的生命周期函数里可以从服务器获取数据然后通过调用 this.setState 方法进行对 state 赋值。

this.setState 就是那个 可以任何时候进行赋值 的方法了。

改造下 Input 组件，state示例：

var Input = React.createClass({
  getInitialState: function() {
    return {
      who: "我"
    }
  },
  change: function(e){
    let target = e.target
    this.setState({
      who : target.value
    })
  },
  render: function(){
    // 使用 props
    return(
      
        
          四月是誰的谎言？
          
        
        {`四月是${this.state.who}的谎言`}
      
    )
  }
})

ReactDOM.render(
  ,
  document.getElementById("JBody")
)

这里进行了事件 onChange 的调用，当触发 change 事件的时候，state 就会进行改版了。
关于时间系统的文档：

react 事件系统

react 表单事件

组件的文档

组件API

组件生命周期

组件的通信

react 的核心中是没有关于两个不同组件之间的相互通信的方法的，但是官方给出了一种flux的通信概念、flux中文文档，然而社区似乎并不觉得这一套方案很好用，于是有了另一种通信概念redux。

我对通信的理解

react 的组件化概念是很明确的，但对于组件之间通信可以说是基本没有。

在我的理解里面，组件的通信可以更明确地理解为数据的通信，因为数据和组件渲染分离是很重要的。
一个负责不同组件渲染的组件容器，会自行判断数据的状态从而进行最终组件的渲染。这样就能做到数据和组件渲染的分离了。这个概念就是Container Components
、Leveling Up With React: Container Components

在其他的一些mv*框架里面，每个组件都有自己的通信接口，从而可以在A组件里面跟B组件进行数据通信，但 react 却是没有这样的接口，从而我们就需要一个借助一些通信工具，比如手机、电脑什么的。

没错，我们可以把 Flux、Redux 这些工具当成通信工具来看待，如果你喜欢，你完全可以用写信的方式（自己写一个观察者模式的函数）。当A组件的数据要与B组件的数据进行打电话的时候，拨通B组件的电话号码，然后把数据告诉B组件就可以了。数据会在运营商的系统里面走一遭，然后传到B组件那里的。

通信场景

例如登录。

在一个页面上，如果存在两个或两个以上需要获取登录信息的组件，就将需要进行通信了。
当一个组件进行了登录之后，应该通知其他需要更新登录信息的组件。这样就产生了通信的需求了。

组件的抽象与封装

这块到没有太多的实践，组件的拆分、定义是一门深思熟虑的艺术。等有实践经验找到门路之后再做补充。
但这块可能是很多人会忽略的，优秀的抽象封装首先应该是针对方便开发和维护的，其次才是复用。

github:https://github.com/jincdream/jincdream.g...

云服务器 GPU云服务器认识认识你深刻认识正确认识

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79102.html

React入门系列 - 4. 认识无状态组件

摘要：让他增加一个内部维持的状态另外有一点需要注意，由于是无状态组件，所以，无论是否变更，都会重新刷新这个组件。 4.1 什么是无状态组件在开发React组件的时候，大家可能会遇到就是我使用的这个组件纯粹就是渲染使用，里面并没有自己的状态、方法、生命周期等等操作。而为这种组件创建完整的实例有一种浪费机器性能的感觉。那么，让我们来看看，如何创建一个easy react component...

cgspine 2019-08-26 18:09 评论0 收藏0
React系列之一起认识Render Prop

摘要：比如有个组件，它用来实时的获取鼠标的位置。命名空间，多个修改同一个导致的命名冲突。据说源码里面为每个组件增加路由属性就是通过该方法好了大功完成了，欢迎一起讨论学习个人博客地址意卿 1.mixins 写过react项目的应该都碰到过，不同组件复用相同代码的问题，在react早期使用React.createClass创建组件的时代，我们经常使用的是mixins来实现代码复用。比如有个组件A...

LMou 2019-08-22 14:58 评论0 收藏0
说说对JSX的认识

摘要：认识引子最近几个月做的一个项目，使用了技术体系，自然而然的用到了。下面就总结一下自己对的认识。而这无疑增加了框架的门槛和复杂度。在被渲染之前，所有的数据都被转义成为了字符串处理。以避免跨站脚本攻击。表示对象将编译成调用。 JSX认识引子最近几个月做的一个项目，使用了react技术体系，自然而然的用到了JSX。下面就总结一下自己对JSX的认识。什么是JSX 即JavaScript...

clasnake 2019-08-20 16:20 评论0 收藏0
React学习之认识Flux架构模式

摘要：是用户建立客户端应用的前端架构，它通过利用一个单向的数据流补充了的组合视图组件，这更是一种模式而非正式框架，你能够无需许多新代码情况下立即开始使用。结构和数据流一个单向数据流是模式的核心。 Flux是Facebook用户建立客户端Web应用的前端架构，它通过利用一个单向的数据流补充了React的组合视图组件，这更是一种模式而非正式框架，你能够无需许多新代码情况下立即开始使用Flux。 ...

EasonTyler 2019-08-23 18:37 评论0 收藏0
React 重要的一次重构：认识异步渲染架构 Fiber

摘要：在之前的叫，是新的，这次更新到架构是一次重量级的核心架构的替换，为了完成这次替换已经准备了两三年的时间了。因此团队引入了异步渲染这个概念，而采用架构可以实现这种异步渲染的方式。官方目前已经把和标记为，并使用新的生命周期函数和进行替换。 Diff 算法熟悉 react 的朋友都知道，在 react 中有个核心的算法，叫 diff 算法。web 界面由 dom 树组成，不同的 dom 树...

cppowboy 2019-08-26 12:23 评论0 收藏0