React小书 - 阅读笔记这是阅读的第三篇系统的教程了，所以不会记录大部分的细节，只会记录一下，我觉得需要提醒自己注意

我已经看过React官方的两个教程了

这是阅读的第三篇系统的教程了，所以不会记录大部分的细节，只会记录一下，我觉得需要提醒自己注意的部分。

正文

事件 `this` 使用 `bind` 绑定的必要性

react使用这种方式绑定事件

# jsx
render () {
    return (
        <h1 onClick={this.doSome.bind(this)}>例子</h1>
    )
}

doSome的调用方式，并不是实例的方法，而是函数直接调用，里面的this如果不进行绑定，就会是null或者undefined

假如想给点击事件传参，这么写

class Title extends Component {
  handleClickOnTitle (word, e) {
    console.log(this, word)
  }

  render () {
    return (
      <h1 onClick={this.handleClickOnTitle.bind(this, 'Hello')}>React 小书</h1>
    )
  }
}

想在 `setState` 之后使用新的 `state`来做后续运算

给setState传递一个函数作为参数 React.js 会把上一个 setState 的结果传入这个函数我们就可以使用该结果进行运算、操作了，然后返回一个新的state对象

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
  }

默认配置 `defaultProps`

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

// this.props.likedText就有默认值啦

没有 state 的组件叫无状态组件（stateless component），设置了 state 的叫做有状态组件（stateful component）尽量多地写无状态组件，尽量少地写有状态的组件

无状态的组件可以很方便的改写为函数组件（使用Hook的话，有状态组件也可以改写为函数组件）

渲染列表的jsx的处理思路

我们把多个元素放在一个数组里面，在把这个数组放到jsx中，以js的形式书写

render () {
    return (
      <div>
        {[
          <span>React.js </span>,
          <span>is </span>,
          <span>good</span>
        ]}
      </div>
    )
  }

关键点：如果往 {} 放一个数组，React.js 会把数组里面一个个元素罗列并且渲染出来。

那怎么利用循环，将元素渲染到页面呢：使用map循环你的数据，为每一条数据构建jsx，然后把这个jsx放到一个新数组里，把这个新数组插到render方法的jsx里面

受控组件

元素的特性或者状态被react控制或者渲染的组件，被称为受控组件。

对于用户可以输入的控件，一般都可以让他们成为受控组件，官方推荐。

ref属性，获取到DOM

假如ref里面是一个函数

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

当 input 元素在页面上挂载完成以后，React.js 就会调用这个函数，并且把这个挂载以后的 DOM 节点传给这个函数。

在函数中我们把这个 DOM 元素设置为组件实例的一个属性，这样以后我们就可以通过 this.input 获取到这个 DOM 元素。

然后我们就可以在 componentDidMount 中使用这个 DOM 元素

this.input 就可以拿到了

记住一个原则：能不用 ref 就不用。可以给组件标签也加上 ref

组件标签也能像普通的 HTML 标签那样编写内嵌的结构

React.js 默认就支持这种写法

所有嵌套在组件中的 JSX 结构都可以在组件内部通过 props.children 获取到

React.js 就是把我们嵌套的 JSX 元素一个个都放到数组当中

我们甚至可以在组件内部把数组中的 JSX 元素安置在不同的地方

dangerouslySetHTML

出于安全考虑的原因（XSS 攻击），在 React.js 当中所有的表达式插入的内容都会被自动转义

render () {
    return (
      <div
        dangerouslySetInnerHTML={{__html: this.state.content}} />
    )
  }

为了防止用户输入<script></script>，对内容进行转义

// 介个方法的功能是将``中包的内容用<code></code>标签包起来，markdown的语法
// 中间将一些符号进行了转义
_getProcessedContent (content) {
        return content
            .replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/"/g, "&quot;")
            .replace(/'/g, "&#039;")
            .replace(/`([\S\s]+?)`/g, '<code>$1</code>')
    }

这个对象的 __html 属性值就相当于元素的 innerHTML

style

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

props类型检查

npm install --save prop-types

【prop-types】文档

React小书 - 阅读笔记

正文

事件 this 使用 bind 绑定的必要性

想在 setState 之后使用新的 state来做后续运算

默认配置 defaultProps