Vue会了吗?来认识一下React吧(上)

前言

React作为Facebook 内部开发 Instagram 的项目中,是一个用来构建用户界面的优秀 JS 库,于 2013 年 5 月开源。作为前端的三大框架之一,React的应用可以说是非常的广泛,包括BAT在内的许多大公司很多项目都是基于其开发的。

Vue:除了VDom之外,Vue的响应性能和React相比还是有很大的区别,无论是本身的语法层面还是外围的第三方支持软件,总之,迁移起来不会是那么容易的事情。

但是作为一名热爱前端的技术人员,学习优秀的技术栈仿佛已经成了一种习惯,在这里结合阮一峰React以及对阮一峰老师15年的教程进行版本更新,简单介绍一下React的入门,本文中所有demo代码都以图片形式展示,目的是建议手打尝试,而不是直接复制,如需代码可以点击这里


使用 create-react-app 快速构建 React 开发环境

create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境。

create-react-app 自动创建的项目是基于 Webpack + ES6 。

  • yarn add create-react-app -g
  • create-react-app projectName
  • cd projectName
  • yarn start

然后打开浏览器输入http://localhost:3000/,就可以看到React的六芒星LOGO了。

以下是React重要的部分

  • JSX – 允许我们编写类似HTML的语法 转换为lightweightJavaScript对象。
  • 虚拟DOM – 实际DOM的JavaScript表示。
  • React.Component – 您创建新组件的方式
  • render(方法) – 描述特定组件的 UI 外观 。
  • ReactDOM.render – 将React组件渲染到DOM节点。
  • state – 组件的内部数据存储(对象)。
  • constructor(this.state) – 建立组件初始 state(状态) 的方式。
  • setState – 一种辅助方法,用于更新组件的 state(状态) 并重新渲染 UI。
  • props – 从父组件传递给子组件的数据。
  • propTypes – 允许您控制传递给子组件的某些 props(属性) 的存在或类型。
  • defaultProps – 允许您为组件设置默认 props(属性) 。
  • 组件的生命周期:

    1. componentDidMount – 装载组件后触发
    2. componentWillUnmount – 在组件卸载之前触发
    3. getDerivedStateFromProps – 当组件装载时以及每当props 更改时触发。 用于在其 props(属性) 更改时更新组件的状态
  • 事件:

    1. onClick
    2. onSubmit
    3. onChange

React的JSX语法

Vue会了吗?来认识一下React吧(上)
HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法,它允许 HTML 与 JavaScript 的混写

因为React没有vue那样的v-for一键循环,所以要自己手动用map来实现
效果图:Vue会了吗?来认识一下React吧(上)

React组件嵌套组件以及数据传递子组件

Vue会了吗?来认识一下React吧(上)
vue通过子组件中的props来传递数据,而React则是用this.props.attr来传递,注意,没有$符号!
组件类的第一个字母必须大写,否则会报错,比如HelloMessage不能写成helloMessage。另外,组件类只能包含一个顶层标签,否则也会报错。

JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组,则会展开这个数组的所有成员.我们定义了一个arr,里面是2个标题标签,通过在ul模板中添加{arr}来实现效果(注意不是vue的"",两者不要搞混了)
Vue会了吗?来认识一下React吧(上)

this.props.children

this.props.attr是取到组件传递过来的数据或属性,而this.props.children则表示组件的所有子节点,可以通过this.props.children.map来遍历出来验证。
Vue会了吗?来认识一下React吧(上)
Vue会了吗?来认识一下React吧(上)


React之PropTypes

组件的属性可以接受任意值,字符串、对象、函数等等都可以。有时,我们需要一种机制,验证别人使用组件时,提供的参数是否符合要求。

组件类的PropTypes属性,就是用来验证组件实例的属性是否符合要求

yarn add prop-types

import PropTypes from 'prop-types'

Vue会了吗?来认识一下React吧(上)
MyTitle中有一个title属性,他的值为一个字符串,我们可以通过MyTitle.propTypes来定义该组件中属性的类型.如果将title: PropTypes.string改为其他类型,就会报以下的错误。
Vue会了吗?来认识一下React吧(上)

React之ref

  1. 同vue的ref作用一样,组件并不是真实的DOM节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM。
  2. 只有当它插入文档以后,才会变成真实的 DOM 。根据 React 的设计,所有的 DOM 变动,都先在虚拟 DOM上发生,然后再将实际发生变动的部分,反映在真实 DOM上,这种算法叫做 DOM diff ,它可以极大提高网页的性能表现。
  3. 但是,有时需要从组件获取真实 DOM 的节点,这时就要用到 ref 属性。

图片放的太多了,在这里贴一下代码..请忽视开头说的话..

class App extends Component {
      handleClick () {
        this.refs.myTextInput.focus()
      }
      render() {
        return (
          <div className="App">
            <LikeButton/>
            <input type="text" ref="myTextInput"/>
            <input type="button" value="Focus the text input" onClick={ this.handleClick.bind(this) }/>
          </div>
        );
      }
    }

在这里需要强调的是,React的事件中如果不用剪头函数,那就要用bind来绑定this。


React之this.state以及点击事件

React中的state就相当于vue里的data数据存储,而小程序的this.setData,大家懂的..

class LikeButton extends Component {
  state = {
    liked: false
  }
  handleClick () {
    // console.log(this)
    this.setState({
      liked: !this.state.liked
    })
  }
  render() {
    const text = this.state.liked?'liked':'don\'t like'
    return (
      <p onClick={ () => this.handleClick() }>
        You { text } this.click to toggle
      </p>
    )
  }
}

在这里定义一个text变量,通过state中的liked来判断text的值,然后再通过onClick点击事件来反复改变liked的值,效果可以自己通过代码实现看看,就是普通的MVVM模型。


React之实现双向数据绑定

vue里面v-model一键实现的事情React又没有-0-,不过我们可以通过onChange事件来简单实现它,直接上代码.

class App extends Component {
  state= {
    value: 'Hello!'
  }
  handleChange (event) {
    this.setState({
      value: event.target.value
    })  }
  render() {
    const val = this.state.value
    return (
      <div className="App">
        <div>
          <input type="text" value={val} onChange={this.handleChange.bind(this)}/>
          <p>{ val }</p>
        </div>
      </div>
    );
  }
}

React之组件生命周期

组件的生命周期分成三个状态:

  • Mounting:已插入真实 DOM
  • Updating:正在被重新渲染
  • Unmounting:已移出真实 DOM

React 为每个状态都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用,三种状态共计五种处理函数。

  • componentWillMount(): 在插入真实DOM之前调用
  • componentDidMount(): 在插入真实DOM之后调用
  • componentWillUpdate(object nextProps,object nextState): 在被重新渲染之前调用
  • componentDidUpdate(object prevProps, object prevState): 在被重新渲染之后调用
  • componentWillUnmount(): 在移除真实DOM之前调用

此外,React 还提供两种特殊状态的处理函数。

  • componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用
  • shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用

另外,组件的style属性的设置方式也值得注意,不能写成style="opacity:{this.state.opacity};"而要写成style={{opacity: this.state.opacity}}

结语

**作为一个前端程序猿很不容易,前端的技术更新太快,也出现了“别更新了,老子学不动了”这类前端的梗。不过前端层出不穷的技术让我们看到了前端的未来,我们都是热于分享的人,希望正在学习的我也能够帮助到正在学习的你。 这些demo都在我的github,感兴趣的朋友可以clone下来看下,最近搭了一个个人blog,欢迎来踩,PC端主题一股科幻风有没有!!主题来自于hexo主题
最后说一句!很重要!如果我的这篇文章帮助到了你,那你可以点个star再走嘛~一起upupup!**

相关推荐