React 入门知识

2018-01-16 本文已影响34人风之化身呀

本文记录React框架入门知识

安装及启动

npm i -g create-react-app             //全局安装react的cli
create-react-app hello-react             //hello-react是项目名
cd hello-react & npm start                //启动项目

基本用法

初始完后，src/index.js内容如下：

import React, { Component } from 'react'      //必须引入
import ReactDOM from 'react-dom'              //做浏览器应用时必须引入
import './index.css'                                        //引入样式文件
class Header extends Component {
  render () {                                                   // 必须有render函数，返回的是JSX形式模板
    return (
      <div>
        <h1>Hello React</h1>
      </div>
    )
  }
}

ReactDOM.render(                                     //ReactDOM帮忙渲染到指定节点
  <Header />,
  document.getElementById('root')
)

所以基本有三个必要步骤：1、引库；2、写组件的render函数；3、ReactDOM渲染到页面。
重要语法点：

JSX实际是把html转成JS对象保存，再借助ReactDOM构建真正DOM渲染到页面。原因有两点：1、方便渲染到其他平台，如RN，就是利用这个JS对象，只是不用ReactDOM来渲染而已；2、组件变动时方便做Diff，提升效率

页面渲染过程
render函数必须返回jsx，并且必须被一个最外层jsx容器包裹，不能平行返回多个（和vue的template一样），return一般还用小括号包裹

...
render () {         //ES6函数简写形式
  return (
    <div>
      <div>第一个</div>
      <div>第二个</div>
    </div>
  )
}
...

jsx中可以用'{}'来插值，内部可以放任何 JavaScript 的代码，包括变量、表达式计算、函数执行等等

render () {
  const word = 'is good'
  return (
    <div>
      <h1>Hello World {word}</h1>      // vue中是双大括号'{{}}'
    </div>
  )
}

表达式插入不仅仅可以用在标签内部，也可以用在标签的属性上

render () {
  const className = 'header'
  return (
    <div className={className}>
      <h1>Hello World</h1>
    </div>
  )
}

JSX元素本身可转为JS对象，因此可将JSX元素看成变量

render () {
  const isGoodWord = true
  const goodWord = <strong> is good</strong>    // 引号都不能加，加了就当字符串了，最重要的是这里可以嵌套插值!!!!
  const badWord = <span> is not good</span>
  return (
    <div>
      <h1>
        Hello World
        {isGoodWord ? goodWord : badWord}
      </h1>
    </div>
  )
}

自定义的组件都必须要用大写字母开头，普通的 HTML 标签都用小写字母开头
事件监听
1、给需要监听事件的元素加上类似于 onClick、onKeyDown 这样的属性即可，本质上也是用了插值运算符，此外，在render里掉方法时都要用this来调。

class Title extends Component {
  handleClickOnTitle () {
    console.log('Click on title.')
  }
  render () {
    return (
      <h1 onClick={this.handleClickOnTitle}>Hello World</h1>
    )
  }
}

2、事件属性名都必须要用驼峰命名法，且只能用在普通的 HTML 的标签上，不能用在组件标签上，如：<Header onClick={this.handleClick} />是无效的。
3、event对象会被传入处理函数，该对象经过React自己的封装，与原生event对象差异不大
4、一般在某个类的实例方法里面的 this 指的是这个实例本身，但react不是，也就是在实例方法里拿不到当前实例，所以需要借助bind来实现。这个模式在react中非常常见。
还可以利用bind来传参数，注意此时事件处理器参数顺序：先接受参数，最后是event

class Title extends Component {
  handleClickOnTitle (param,e) {
    console.log(this)
  }
  render () {
    return (
      <h1 onClick={this.handleClickOnTitle.bind(this,param)}>Hello World</h1>
    )
  }
}

state & setState
一个组件的显示形态是可以由它数据状态和配置参数决定的

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'
class LikeButton extends Component {
  constructor () {
    super()                                           //构造函数中调父元素初始化方法
    this.state = {                                  // 添加自身状态属性
          name: 'Tomy',
          isLiked: false
     }         
  }

  handleClickOnLikeButton () {
    this.setState({                     //只能通过setState来改变状态，不能直接this.isLiked=××
      isLiked: !this.state.isLiked   //只设置需要更新的属性，其他属性保持不变，如name
    })
  }
  render () {
    return (
      <button onClick={this.handleClickOnLikeButton.bind(this)}>
        {this.state.isLiked ? '取消' : '点赞'} 👍
      </button>
    )
  }
}

setState接受函数参数和对象参数。当是对象参数时，多个setState不是实时更新，而是react帮你存在队列里一起更新(为了效率)；当是函数参数时，setState操作是实时更新的。

  handleClickOnLikeButton () {
    this.setState((prevState) => {
      return { count: 0 }
    })
    this.setState((prevState) => {
      return { count: prevState.count + 1 } // 上一个 setState 的返回是 count 为 0，当前返回 1
    })
    this.setState((prevState) => {
      return { count: prevState.count + 2 } // 上一个 setState 的返回是 count 为 1，当前返回 3
    })
    // 最后的结果是 this.state.count 为 3
  }

当进行多次 setState，实际上组件只会重新渲染一次，而不是多次；这是因为在 React.js 内部会把 JavaScript 事件循环中的消息队列的同一个消息中的 setState 都进行合并以后再重新渲染组件

props & defaultProps

class LikeButton extends Component {
  static defaultProps = {
    likedText: '取消',
    unlikedText: '点赞'
  }

  constructor () {
    super()
    this.state = { isLiked: false }
  }

  handleClickOnLikeButton () {
    this.setState({
      isLiked: !this.state.isLiked
    })
  }

  render () {
    return (
      <button onClick={this.handleClickOnLikeButton.bind(this)}>
        {this.state.isLiked
          ? this.props.likedText
          : this.props.unlikedText} 👍
      </button>
    )
  }
}

1、为了使得组件的可定制性更强，在使用组件的时候，可以在标签上加属性来传入配置参数。
2、组件可以在内部通过 this.props 获取到配置参数，组件可以根据 props 的不同来确定自己的显示形态，达到可配置的效果。
3、可以通过给组件添加类属性 defaultProps 来配置默认参数。
4、props 一旦传入，你就不可以在组件内部对它进行修改。但是你可以通过父组件主动重新渲染的方式来传入新的 props，从而达到更新的效果。

state Vs props
state 在组件内部初始化，可以被组件自身修改，而外部不能访问也不能修改。你可以认为 state 是一个局部的、只能被组件自身控制的数据源。state 中状态可以通过 this.setState 方法进行更新，setState 会导致组件的重新渲染。
props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的配置参数，组件内部无法控制也无法修改。除非外部组件主动传入新的 props，否则组件的 props 永远保持不变。
state 是让组件控制自己的状态，props 是让外部对组件自己进行配置。

无状态组件（函数式组件）:只能接收props为参数，只提供render的返回值

const HelloWorld = props=> {
  const sayHi = event => alert('Hello World')
  return (
    <div onClick={sayHi}>Hello World</div>
  )
}

渲染列表常用做法（map）

class Index extends Component {
  render () {
    return (
      <div>
        {users.map((user,index) => {            //map不改变原数组
          return (
            <div key={index}>
              <div>姓名：{user.username}</div>
              <div>年龄：{user.age}</div>
              <div>性别：{user.gender}</div>
              <hr />
            </div>
          )
        })}
      </div>
    )
  }
}

组件生命周期
React.js 将组件渲染，并且构造 DOM 元素然后塞入页面的过程称为组件的挂载。
生命周期函数有：
componentWillMount：组件挂载开始之前，也就是在组件调用 render 方法之前调用。
componentDidMount：组件挂载完成以后，也就是 DOM 元素已经插入页面后调用。
componentWillUnmount：组件对应的 DOM 元素从页面中删除之前调用
组件的 state 的初始化工作放在 constructor 里面去做；
在 componentWillMount 进行组件的启动工作，例如 Ajax 数据拉取、定时器的启动；
组件从页面上销毁的时候，有时候需要一些数据的清理，例如定时器的清理，就会放在 componentWillUnmount 里面去做；
需要进行DOM操作时，在componentDidMount中做
ref
ref 属性可以帮助我们获取已经挂载的元素的 DOM 节点

class AutoFocusInput extends Component {
  componentDidMount () {
    this.input.focus()
  }

  render () {
    return (
      <input ref={(input) => this.input = input} />
    )
  }
}

ReactDOM.render(
  <AutoFocusInput />,
  document.getElementById('root')
)

给input 元素加了一个 ref 属性，这个属性值是一个函数。当 input 元素在页面上挂载完成以后，React.js 就会调用这个函数，并且把这个挂载以后的 DOM 节点传给这个函数。在函数中我们把这个 DOM 元素设置为组件实例的一个属性，这样以后我们就可以通过 this.input 获取到这个 DOM 元素。
注意：ref对应值是函数，函数以dom为参数；一般只用于普通html标签，不用于自定义组件上。

props.children
使用自定义组件的时候，可以在其中嵌套 JSX 结构。嵌套的结构在组件内部都可以通过 props.children 获取到，这种组件编写方式在编写容器类型的组件当中非常有用。

ReactDOM.render(
  <Card>
    <h2>React.js 小书</h2>
    <div>开源、免费、专业、简单</div>
    订阅：<input />
  </Card>,
  document.getElementById('root')
)
// Card组件
class Card extends Component {
  render () {
    return (
      <div className='card'>
        <div className='card-content'>
          {this.props.children}
        </div>
      </div>
    )
  }
}

dangerouslySetHTML 和 style 属性
dangerouslySetHTML设置的值不会被转义

  render () {
    return (
      <div
        className='editor-wrapper'       //这里用className,而不是class
        dangerouslySetInnerHTML={{__html: this.state.content}} /> //这个content不会转义
    )
  }

style的特殊性：1、接受一个对象，这个对象里面是这个元素的 CSS 属性键值对；2、原来 CSS 属性中带 - 的元素都必须要去掉 - 换成驼峰命名，如 font-size 换成 fontSize

<h1 style={{fontSize: '12px', color: this.state.color}}>React.js 小书</h1>

组件参数验证PropTypes

// npm install --save prop-types
import React, { Component } from 'react'
import PropTypes from 'prop-types'

class Comment extends Component {
  static propTypes = {
    comment: PropTypes.object.isRequired
  }

  render () {
    const { comment } = this.props
    return (
      <div className='comment'>
        <div className='comment-user'>
          <span>{comment.username} </span>：
        </div>
        <p>{comment.content}</p>
      </div>
    )
  }
}
//
PropTypes.array
PropTypes.bool
PropTypes.func
PropTypes.number
PropTypes.object
PropTypes.string
PropTypes.node
PropTypes.element

高阶组件
高阶组件就是一个函数，传给它一个组件，它返回一个新的组件。高阶组件的作用其实就是为了组件之间的代码复用。组件可能有着某些相同的逻辑，把这些逻辑抽离出来，放到高阶组件中进行复用。高阶组件内部的包装组件和被包装组件之间通过 props 传递数据
context 对象
一个组件可以通过 getChildContext 方法返回一个对象，这个对象就是子树的 context，提供 context 的组件必须提供 childContextTypes 作为 context 的声明和验证。
如果一个组件设置了 context，那么它的子组件都可以直接访问到里面的内容，它就像这个组件为根的子树的全局变量。任意深度的子组件都可以通过 contextTypes 来声明你想要的 context 里面的哪些状态，然后可以通过 this.context 访问到那些状态。

// 以Index里包含Header组件为例
class Index extends Component {
  static childContextTypes = {        // 1、声明state中属性类型，必须写
    themeColor: PropTypes.string
  }

  constructor () {
    super()
    this.state = { themeColor: 'red' }  //2、初始化state
  }

  getChildContext () {
    return { themeColor: this.state.themeColor }        //3、用state值生成后代可以共用的context
  }

  render () {
    return (
      <div>
        <Header />
      </div>
    )
  }
}

// 子组件是这样获取context的
class Header extends Component {
  static contextTypes = {        //只要声明contextTypes就可以通过this.context使用全局的context了
    themeColor: PropTypes.string
  }

  render () {
    return (
      <h1 style={{ color: this.context.themeColor }}>React.js 小书标题</h1>
    )
  }
}

参考

React.js 小书

React 入门知识

安装及启动

基本用法

参考

猜你喜欢

热点阅读