学习react的一些碎碎念

325 阅读2分钟
  • JSX

    • 一个组件类必须要实现一个 render 方法,这个 render 方法必须要返回一个 JSX 元素。
    • 在 JSX 当中你可以插入 JavaScript 的表达式,表达式返回的结果会相应地渲染到页面上。表达式用 {} 包裹
    • JSX 可以放置任何表达式内容。
  • props

    • 可以通过给组件添加类属性 defaultProps 来配置默认参数。
    • props 一旦传入,你就不可以在组件内部对它进行修改。但是你可以通过父组件主动重新渲染的方式来传入新的 props,从而达到更新的效果。
  • 事件

    • 如果你想在事件函数当中使用当前的实例,你需要手动地将实例方法 bind 到当前实例上再传入给 React.js。
    class Title extends Component {
      handleClickOnTitle (e) {
        console.log(this)
      }
    
      render () {
        return (
          <h1 onClick={this.handleClickOnTitle.bind(this)}>React 小书</h1>
        )
      }
    }
    
    • bind 会把实例方法绑定到当前实例上,然后我们再把绑定后的函数传给 React.js 的 onClick 事件监听。这时候你再看看,点击 h1 的时候,就会把当前的实例打印出来:
    • React.js 小书事件监听图片
  • setstate

    • 引出了 setState 的第二种使用方式,可以接受一个函数作为参数。React.js 会把上一个 setState 的结果传入这个函数,你就可以使用该结果进行运算、操作,然后返回一个对象作为更新 state 的对象

    • 我们进行了三次 setState,但是实际上组件只会重新渲染一次,而不是三次;这是因为在 React.js 内部会把 JavaScript 事件循环中的消息队列的同一个消息中的 setState 都进行合并以后再重新渲染组件。

      深层的原理并不需要过多纠结,你只需要记住的是:在使用 React.js 的时候,并不需要担心多次进行 setState 会带来性能问题。

  • state 是让组件控制自己的状态,props 是让外部对组件自己进行配置

  • 一般来说,在 React.js 处理列表就是用 map 来处理、渲染的。

  • 对于用表达式套数组罗列到页面上的元素,都要为每个元素加上 key 属性,这个 key 必须是每个元素唯一的标识

    ...
    class Index extends Component {
      render () {
        return (
          <div>
            {users.map((user, i) => <User key={i} user={user} />)}
          </div>
        )
      }
    }
    ...
    

    记住一点:在实际项目当中,如果你的数据顺序可能发生变化,标准做法是最好是后台数据返回的 id 作为列表元素的 key