内容简介: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
搬移过来,拥有 javaScript
和 html
原来所拥有的,然后 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
,如果子组件要修改父组件的数据,只能通过子组件触发父组件的方法在父组件里面修改,子组件是不能直接修改的,在 vue
和 react
里面都是一样的,只是语法不一样。上面有一个例子讲到了,还特意解释了一下想知道翻上去看一看
react
简单的就到这里,路由呀,中间件呀,等我学到那里在来说吧。我是初学者请多多指教,有什么写的不对或者不好的欢迎评论指出。 案例DEMO
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
JavaScript忍者秘籍
John Resig、Bear Bibeault / 徐涛 / 人民邮电出版社 / 2015-10 / 69.00
JavaScript语言非常重要,相关的技术图书也很多,但没有任何一本书对JavaScript语言的重要部分(函数、闭包和原型)进行深入、全面的介绍,也没有任何一本书讲述跨浏览器代码的编写。本书是jQuery库创始人编写的一本深入剖析JavaScript语言的书。 本书共分四个部分,从准入训练、见习训练、忍者训练和火影训练四个层次讲述了逐步成为JavaScript高手的全过程。全书从高级We......一起来看看 《JavaScript忍者秘籍》 这本书的介绍吧!