React 总结初稿一

栏目: 服务器 · 发布时间: 6年前

内容简介:18 年转眼即逝,不同寻常的一样。这一年我毕业了,入坑前端。工作只用但是为什么我还是要去学那么多呢?我刚刚毕业,学习是最主要的。但缺乏在工作中的使用,有些东西学了很快就忘记了,学我也只是学到了一点皮毛,一些语法,无济于事,我是不是多此一举呢?我也曾经这样怀疑过自己,我也很无奈。脑海里回荡起领导说的一句话:我们在这家公司工作是为了下家工作做准备的,学到东西是重点,不要认为没有用(领导是

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 总结初稿一
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() 生命周期的时候,我们完全可以用一个无状态组件来替换。下面是无状态组件和有状态组件

React 总结初稿一
React 总结初稿一

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

State

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

React 总结初稿一
React 总结初稿一

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

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

React 总结初稿一

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

React 总结初稿一
if 案例

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

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

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


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

JavaScript忍者秘籍

JavaScript忍者秘籍

John Resig、Bear Bibeault / 徐涛 / 人民邮电出版社 / 2015-10 / 69.00

JavaScript语言非常重要,相关的技术图书也很多,但没有任何一本书对JavaScript语言的重要部分(函数、闭包和原型)进行深入、全面的介绍,也没有任何一本书讲述跨浏览器代码的编写。本书是jQuery库创始人编写的一本深入剖析JavaScript语言的书。 本书共分四个部分,从准入训练、见习训练、忍者训练和火影训练四个层次讲述了逐步成为JavaScript高手的全过程。全书从高级We......一起来看看 《JavaScript忍者秘籍》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

SHA 加密
SHA 加密

SHA 加密工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具