React 总结初稿一

18 年转眼即逝,不同寻常的一样。这一年我毕业了,入坑前端。工作只用 vue ,自己又学了 react , TypeScript ,小程序,这些在工作中从未用到过。会一个框架没有用,会几个框架也没有用,能够在不同的业务解决不同的问题才是精华所在。我们最终都是要归根于公司的,公司用什么我们学什么,入职这家公司用这个我们学这个,入职那家公司我们学那个。工作需要什么我们学什么,框架说到底都是库,死磕文档就好了(大佬说的),道理是这样的。

但是为什么我还是要去学那么多呢?我刚刚毕业,学习是最主要的。但缺乏在工作中的使用,有些东西学了很快就忘记了,学我也只是学到了一点皮毛,一些语法,无济于事,我是不是多此一举呢?我也曾经这样怀疑过自己,我也很无奈。脑海里回荡起领导说的一句话:我们在这家公司工作是为了下家工作做准备的,学到东西是重点,不要认为没有用(领导是 java,曾教我Linux系统简单命令)。技多不压身,闲着也是闲着,学点东西以后扯皮用,说不准哪天工作需要或者说换家公司换技术栈了,面对各种情况都能够快速入手,因为曾经学习过,因为随时准备着,不慌。

JSX

react 推荐使用的是 JSX 语法;通过 react 编译他会把JSX 解析成 JavaScript 表达式

简单语法

const name = 'Josh Perez'
const element = <h1> Hello {name} </h1>
复制代码

把元素标签拿出来,写成常量,标签内还可以接受变量,如上所示例子;既然他是 JavaScript 表达式,那么就可以在 if 或者 for 循环中使用了

function GetGreeting(user) {
  if (user) {
    return <h1> hello world </h1>
  }eles {
    return <h1>hello sunseekers</h1>
  }
}
复制代码

JSX 是把元素标签赋值给一个常量,那么元素标签应该有的属性他都存在,就和我们平时使用元素一样;

const element = <div tabIndex = '0'></div>
const img = <img src={https://reactjs.org/docs/introducing-jsx.html}/>
复制代码

组件名称总是大写字母开始,为了区分组件和 DOM 标签 我自己简单粗暴的理解 JSX 就是用 js 的形式把 html 搬移过来,拥有 javaScripthtml 原来所拥有的,然后 react 帮助你去解析 在项目中的使用

react 里面大量使用 ES6 的语法书写,如果你 ES6 不太熟悉,我建议你去了解一下。对于 ES6 的相关知识一笔带过。

既然我们了解了 JSX 的简单语法,那么在项目中如何使用呢?

组件

首先声明一点在 react 里面分为有状态组件(有 class 的)和无状态组件或者说函数式组件(有 function

无状态组件 ( 函数式组件 )

function Welcome(props) {//定义数据来自父组件传递
  return <h1> Hello {props.name} </h1>
}
复制代码

有状态组件

class Welcome extends React.Component {
  construction(props){//构造函数优于任何函数,会被自动执行的函数,所有class都有的函数
    super(props)//调用父类
    this.state = {//定义数据需要把数据放在状态里面(this.state就是这个组件的状态)
      name: 'sunseekers'
    }
  }
  render() { //当组件的state或者props(因为props的值来自state)发生改变的时候,render函数就会重新执行
    return <h1>hello, {this.state.name}</h1>
  }
}
复制代码

有状态组件和无状态组件的区别:

无状态组件里面没有内置 react 的生命周期函数更加纯粹,轻便相对而言性能会更好。

有状态组件继承 react.Component ,它默认内置了一些生命周期函数(唯独没有内置render生命周期函数函数)所以我们要在写组件的时候一定要写这个生命周期函数否则会报错。

具体需求具体使用,一般情况当我们的组件里面没有复杂逻辑,数据传递我们可以尝试使用,当一个组件只有 render() 生命周期的时候,我们完全可以用一个无状态组件来替换。下面是无状态组件和有状态组件

生命周期函数是指在某一时刻组件会自动调用执行的函数

State

React 很灵活,但是它有一条严格的规则 reducer() 生命周期函数( 或者说 react 组件 ) 必须是纯函数(纯函数,给固定的输入,就一定会有固定的输出,而且不会有任何副作用,不允许修改自身的 props ,在案例中我们要修改数据都借助 state 状态

state 里面的数据我们不能直接修改,直接修改并不会重新渲染一个组件,我们需要借助 setState() ( 状态更新是异步的,解决这个问题我们常常在 setState 里面调用函数,函数接受两个参数,一个是更新前的一个是更新后的;不建议 setState 里面使用对象的形式,所以我就没有举例 )

细心的朋友一定发现了,在案例中我们使用了循环渲染。通过使用数组的 map,在 react 里面可以使用条件渲染,循环渲染。react 中一个 {} 表示是一个 js 表达式,{{}}这种,外层表示 js 表达式,内层是 js 对象;

条件渲染也很简单,就和我们平常写js一样

if 案例

vue中,表单的绑定实时渲染是作者帮我们封装好了,我们直接使用就好v-model,但是在react中,需要我们自己去写。自己写也是很简单的,在上面的例子里面我们已经写过了,不相信可以翻上去看看,哈哈

父组件给子组件传递数据是单项的,通过props ,如果子组件要修改父组件的数据,只能通过子组件触发父组件的方法在父组件里面修改,子组件是不能直接修改的,在 vuereact里面都是一样的,只是语法不一样。上面有一个例子讲到了,还特意解释了一下想知道翻上去看一看

react 简单的就到这里,路由呀,中间件呀,等我学到那里在来说吧。我是初学者请多多指教,有什么写的不对或者不好的欢迎评论指出。案例DEMO

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏较真的前端

[译] 理解 JavaScript 中的 undefined

与其他的语言相比,JavaScript 中 undefined 的概念是有些令人困惑的。特别是试图去理解 ReferenceError(“x is not de...

10720
来自专栏finleyMa

1. 认识 Rxjs

在网页的世界存取任何资源都是非同步(Async)的,比如说我们希望拿到一个档案,要先发送一个请求,然后必须等到档案回来,再执行对这个档案的操作。这就是一个非同步...

15730
来自专栏magicodes

JqGridView 1.0.0.0发布

前几个月,客户要求显示列表做到列锁定+表头锁定+列组合,但从Extjs到Jquery EasyUi,从Jquery Grid到Telerik等等组件,发现无一符...

16320
来自专栏HUBU生信

用脚本同时对多个fq文件进行数据质量检测

当有多个fq文件要进行数据质量检测时,我们可通过建立一个脚本执行文件,执行该脚本,可同时批量对fq文件进行检测。 1.首先我们要建立一个脚本文件(后缀名为.sh...

19530
来自专栏magicodes

Ext.NET加入自定义验证JS函数

     ExtJS验证很方便,在使用FormPanel的时候,我们可以很方便的进行验证。比如设置必填项、正则、字段类型等等。比如如下所示:

10540
来自专栏magicodes

TreeView结合UpdatePanel使用时,SelectedNodeStyle不生效的解决方案

在某些时候,使用UpdatePanel可以极大的提升开发效率并且获得比较好的用户体验,尤其是做SharePoint开发时。老早就看过MSDN上申明UpdateP...

6510
来自专栏magicodes

代码重构——程序员应有的基因

去年帮另一个项目组赶项目时,总是有很多地方令我不舒服。本人编码有点小小的“洁癖”——即不喜欢见到冗余代码。即时现在忙,没时间整理,但是一有时间,我都尽可能的去重...

8720
来自专栏magicodes

打造SharePoint之在线开发神器SPOnlineDevelopTool(一)——概述

做SharePoint开发有时候是一件比较痛苦的事情,毕竟庞大的框架总是笨重的~~

16740
来自专栏我分享我快乐

【干货】jquery_01第一例

11540
来自专栏我分享我快乐

【案例】如何用js实现加载上升的loading效果(内附代码)

34830

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励