React 初学

react

  今天是第一次在写博客,很生疏哈哈~~

  我学习前端大概有小半年左右,起初完全是因为兴趣。其实学习一门计算机语言着实不容易,但也多亏了许多博客网站的大神们的分享吸收了不少的经验。如今我也大三了,打算走程序员这条路,那最近也是为了工作,打算整合一下所学的知识,同时,最近跟着学长在做学校学生处的一个项目,学长决定用react开发,刚刚学完vue,vue-router,vuex等等的我。。。。。。。很难瘦~~哈哈!昨天详细的看了一遍react文档,当然是中文了哈(ps:毕竟才学完vue嘛,还是中文看的方便),主要是任务急哈,先中文撸了一遍,大概了解了一下react,已经初步会使用了,其实并不是很难。但众所周知嘛英文文档是必须要看的哈~我只能过两天再补上了。。。。。。

  这次随笔主要是摘抄文档上的一些小例子,及react的初阶用法,以免在这次的项目中我可以方便的查询哈~毕竟是大白话哈哈!!!当然许多很简单的内容我也相应的略去了,主要记载一些用法和一些值得注意的地方,而且为了记忆,当然所有的内容都是我自己亲手敲的。不过毕竟我个人主要还是比较喜欢vue,那么react后续的一些自己的理解和深入的研究以及redux等等,在后续的博客肯定会继续探讨的,由于我本身已经看过一遍了,而且已经实践过大部分内容,所以本篇只是简记一下,那先开始今天的学习哈!

1.简单的React例子

ReactDOM.render(

   <h1>hello, world</h1>,

   document.getElementById("root")

);

 

2.jsx简介

  形如 const ele = <h1>hello world</h1>

  其中可任意使用表达式,但要扩在大括号里

  闭合式标签如  < input  />

  注 : 因为 JSX 的特性更接近 JavaScript 而不是 HTML , 所以 React DOM 使用 camelCase 小驼峰命名 来定义属性的名称,而不是使用 HTML 的属性名称

  Babel 转译器会把 JSX 转换成一个名为 React.createElement() 的方法调用,以下两个代码功能相同

  

const ele = (

  <div className="fu">

    hello

  </div>

);


const ele = React.creatElement(

  div,

  { className : "fu"},

  "hello"

)

 

3.元素渲染

  ReactDOM.render(

    ele,

    document.getElementById("root")

  )

 

4.组件&props

  函数定义组件: 

  function component(props) {

    return <div>hello world</div>

  }

  

  es6的class定义组件:

    class component extends React.Component {

      render() {

        return <div>hello world</div>

      }

    }

  注: react会把户自定义组件的属性以props对象的形式传到这个组件中,其实好比上文(刚才我写的)中react.createElement方法中第二个参数也是以对象形式写入

  

  组件名开头必须大写!!!!!!!

  组件的返回值只能有一个根元素!!!!!(记得用div包裹)

  所有的组件必须像使用纯函数那样使用他的props,就是只读!!!

5.state&生命周期 (ps:此处十分简单,但一定要好好看,写的话篇幅太大,我就偷个懒哈,请注意下this.state初始化&super(props))

  几个定义: 

      挂载: 组件加载到DOM上 componentDidMount() 

      卸载 : 组件生成的DOM移除 componentWillUnmount()

      请好好看react文档中clock的实现方法,很基础我就不做一一赘述了(点击跳转哈)

  

  state三点注意:

    1.不要直接更新状态,请使用setState()

    2.状态更新可能是异步的(我就遇到过这样的问题,由于当时没看react文档就开始敲项目,所以我用了promise,有点傻哈哈!!)

     setState()来接受一个函数而不是一个对象,函数将接收先前的状态作为第一个参数,将此次更新被应用时的props做为第二个参数

    3.状态更新合并(这里是浅合并)

  

数据自顶向下流  一定了解一下哦!

6.事件处理

  • React事件绑定属性的命名采用驼峰式写法,而不是小写。
  • 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM元素的写法)
  • 不能使用return false 阻止默认事件,请使用preventDefault()方法

   谨慎对待jsx回调函数的this,三种方法:

   1. this.handle = this.handle.bind(this)推荐

   2.handle() => {...some code}

   3.形如<button onClick={(e) => this.handleClick(e)}>

向事件处理函数传递参数:事件对象要最后传入事件处理函数

7.条件渲染

  比较有意思的是{someCode && <div>hello world</div>} 用法着实很方便,很是推荐

  或者是三目运算符{someCode ? chooseOne : chooseAnother}二者用法和js用法一样

8.列表&keys

  其实同vue的for差不多,react文档中用map循环遍历数组,创建多个li,同时为每个li标签写入属性key,注意key的值不必在全局唯一,但在兄弟节点必须唯一,

在文档中后面的高级指引也有提到key提升性能的好处,同时注意,key只会给react提示,并不会传入到你的组件中,所以在组件中你是访问不到props.key的

9.表单

input,textarea, select

  受控组件 : 将表单元素value状态放到state里,在事件处理函数内用setSate()更新

  当你有处理多个受控的input元素时,你可以通过给每个元素添加一个name属性,来让处理函数根据 event.target.name的值来选择做什么。且当你想为name值不同的input使用同一个事件函数更改同一个状态那么不妨 this.setState({[name]:

value})

10.状态提升

  就是当你想让多个兄弟组件的同一个状态互相关联时,你可以把这个状态提升到父组件的state中,将改变这个状态的事件处理函数也相应的提升到父组件中,然后在子组件中利用props

将父组件的状态继承下来,同时在子组件中利用props.eventHandle改变继承的props,因为props只读的特性所以只能利用这种方法在父组件中更改state来影响子组件继承的props

11.组合vs继承 建议使用组合来复用组件之间的代码

  1.一些组件(Sidebar, Dialog)开始时不知道自己的子组件,建议用props.children代替子组件,即父组件标签内的任何内容(即子组件 + 其内容)都将通过children传入父组件中,如果你不想使用   children或者children不方便使用时,你可以使用自己定义的属性(将一些组件用{}赋值给子组件的属性),并在父组件中利用props引入组件 

12.react理念 

  其实如果你详细的阅读一下文档你就会发现,其实react理念和我们正常开发项目的步骤很是一致

  第一步:其实就是把你想要做的UI界面大体的划分一下,划分一下不同功能的组件

  第二步:用react创建一个静态版本,就是大体构建项目的UI框架

  第三部:找出最小的state状态集,不要重复状态(记得上文提到的状态提升么),不要写一些不必要的state

  第四步:确定你的状态位于哪里,由于react的数据单项流动特性,还是记住状态提升作参考,减少复用state,将组件写在高一级的组件中

  第五步:添加反向数据流,顾名思义,通过底层表单改变上级组见的state,例如input的onChange事件函数通过setState更改父级的state

总结:以上就是react的初阶学习,其实react的许多特性(如单向数据流,组件化,state,props等等)保证了react代码的清晰性和可读性,那这高效的可读性也为我们学习他人的代买提供了很大的方便,总的来说react很容易入门(当然我目前也才刚刚踩到门槛),开发时条理性也极强,为我们提供了许多方便的逻辑思考方法,那么后续的学习肯定是要的(主要是高级指引有两个地方没怎么看懂哈),下篇应该是vue的复习了,我们下篇再见喽!!

   

 

  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

以上是 React 初学 的全部内容, 来源链接: utcz.com/z/381556.html

回到顶部