React 学习笔记(一)

主要记录一些概念。

JSX

所谓的JSX其实就是JavaScript对象。

  • JSXJavaScript语言的一种语法扩展,长得像HTML,但并不是HTML
  • React.js可以用JSX来描述你的组件长什么样的。
  • JSX在编译的时候会变成相应的JavaScript对象描述。
  • react-dom负责把这个用来描述UI信息的JavaScript对象变成DOM元素,并且渲染到页面上。

组件

自定义的组件都必须要用大写字母开头,普通的 HTML 标签都用小写字母开头。

事件监听

  • 这些 on* 的事件监听只能用在普通的 HTML 的标签上,而不能用在组件标签上。
  • React.js 会给每个事件监听传入一个 event 对象,这个对象提供的功能和浏览器提供的功能一致,而且它是兼容所有浏览器的。
  • React.js 的事件监听方法需要手动 bind 到当前实例,这种模式在 React.js 中非常常用。

setState

setState方法由父类Component所提供。当我们调用这个函数的时候,React.js 会更新组件的状态state,并且重新调用render方法,然后再把render方法所渲染的最新的内容显示到页面上。

这里还有要注意的是,当你调用setState的时候,React.js 并不会马上修改state。而是把这个对象放到一个更新队列里面,稍后才会从队列当中把新的状态提取出来合并到state当中,然后再触发组件更新。

在使用 React.js 的时候,并不需要担心多次进行setState会带来性能问题。

props

  • 在使用一个组件的时候,可以把参数放在标签的属性当中,所有的属性都会作为props对象的键值。
  • 可以通过给组件添加类属性defaultProps来配置默认参数。
  • props一旦传入,你就不可以在组件内部对它进行修改。但是你可以通过父组件主动重新渲染的方式来传入新的props,从而达到更新的效果。

state VS props

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

key

对于用表达式套数组罗列到页面上的元素,都要为每个元素加上key属性,这个key必须是每个元素唯一的标识。一般来说,key的值可以直接后台数据返回的id,因为后台的id都是唯一的。

挂载

React.js将组件渲染,并且构造DOM元素然后塞入页面的过程称为组件的挂载。

生命周期

  • componentWillMount:组件挂载开始之前,也就是在组件调用 render 方法之前调用。
  • componentDidMount:组件挂载完成以后,也就是 DOM 元素已经插入页面后调用。
  • componentWillUnmount:组件对应的 DOM 元素从页面中删除之前调用。

props.children

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

dangerouslySetHTML

出于安全考虑的原因(XSS 攻击),在 React.js 当中所有的表达式插入的内容都会被自动转义。
设置动态 HTML 结构:

1
2
3
4
5
6
7
render () {
return (
<div
className='editor-wrapper'
dangerouslySetInnerHTML={{__html: this.state.content}} />
)
}

需要给dangerouslySetInnerHTML传入一个对象,这个对象的__html属性值就相当于元素的innerHTML,这样我们就可以动态渲染元素的innerHTML结构了。

style

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

只要简单地setState({color: 'blue'})就可以修改元素的颜色成蓝色。

PropTypes

通过PropTypes给组件的参数做类型限制,可以在帮助我们迅速定位错误,这在构建大型应用程序的时候特别有用;另外,给组件加上propTypes,也让组件的开发、使用更加规范清晰。

顺序

组件的内容编写顺序如下:

  • static 开头的类属性,如defaultPropspropTypes
  • 构造函数,constructor
  • getter/setter(还不了解的同学可以暂时忽略)。
  • 组件生命周期。
  • _开头的私有方法。
  • 事件监听方法,handle*
  • render*开头的方法,有时候render()方法里面的内容会分开到不同函数里面进行,这些函数都以render* 开头。
  • render()方法。

高阶组件

高阶组件就是一个函数,传给它一个组件,它返回一个新的组件。新的组件使用传入的组件作为子组件。
高阶组件的作用是用于代码复用,可以把组件之间可复用的代码、逻辑抽离到高阶组件当中。新的组件和传入的组件通过props传递信息。

0%