React——React基础
React基础
react基本概念
JSX 简介
JSX是一宗描述UI的JavaScript扩展语法，是组件化语言实现的基础，是沟通UI描述和UI数据之间的桥梁。
JSX语法
基本语法
基本的语法使用成对的标签构成的一个树状结构的数据。
const element = {
<div>
<h1>Hello, World</h1>
</div>
}
标签类型
- 首字母大写的是React组件
- 首字母小写的是DOM类型的标签
JavaScript表达式
JSX本质上依然是JavaScript，但是需要用大括号{}包起来。但是只能使用JavaScript表达式，而不能使用多行语句。
标签属性
JSX的标签和DOM标签还是有些区别，主要的变化有class写成className，事件属性采用驼峰格式。
JSX不需的
JSX只是一些方法的语法糖，但是使用JSX能够使得创建界面元素更加简洁。
组件
组件定义
类组件
class定义组件满足两个条件：
- class继承自React.Component
- class内部必须定义render方法，表示该组件的UI的React元素。
使用ES 6 export将组件作为默认模块导出。从而可是在其他JS中导入。
组件的props
组件的props用于把父组件中的数据或方法传递给子组件，供子组件使用。
<User name="React" age="4" address="America"/>
Props = {
name: "React",
age: '4',
address:'America'
}
组件的state
组件的state是组件内部的状态，state的变化最终将反映到组件UI的变化上，通过constructor中this.state初始化状态，this.setState改变。super执行父类的constructor。
props是组件对外的接口，组件通过props接收外部的数据，但是只读的。state是组件对内的接口，组件内部状态的变化通过state来反映。
组件状态
有状态组件主要关注处理状态变化的业务逻辑，无状态组件主要关注UI的渲染。
属性校验和默认属性
React提供了PropTypes这个对象，用于校验组件属性的类型。PropTypes包含组件数据可能的类型。
如果属性是组件的必须属性，就需要某个组件的时候，传入属性.isRequired，而对于默认属性，则使用defaultProps实现。
组件样式
外部CSS样式表
一种是在使用组件的HTML页面中通过标签引入，这种样式表作用于整个应用的所有组件，第二种就是把样式表当作一个模块，常用于该样式表作用于某个组件。
内联样式
通过DOM类型节点的style属性引用相应样式对象，
style={{}}
第一个大括号表示style的值是一个JavaScript表达式，第二个大括号表示JavaScript表达式时一个对象。
组件的声明周期
组件从创建到被销毁的过程称为组件的生命周期。
挂载阶段
这个阶段的组件被创建，初始化，并被挂载到DOM中，并完成组件的第一次渲染。
constructor
这个构造方法接受一个参数props，从父组件中传入的属性对象。但是必须调用super(props)才能保证props被传入组件。常用于初始化组件的state以及绑定事件处理方法等工作。
componentWillMount
这个方法在组件被挂载到DOM前可以调用。并且只会被调用一次。
render
不负责组件的实际渲染工作，只是返回一个UI的描述，在render中不能调用任何有副作用的操作，例如setState。
componentDidMount
在组件被挂载到DOM后调用，只会被调用一次，这个方法通常还会用于向服务器请求数据，在这个方法中调用this.setState会引起组件的重新渲染。
更新阶段
组件在挂载到DOM后
componentWillReceiveProps(nextProps)
nextProps是父组件传递给当前组件的新的Props，可以根据新的props调用this.setState出发组件的重新渲染。
shouComponentUpdata(nextProps, nextState)
当方法返回为true是组件就会更新，否则不会更新
componentWillUpdate(nextProps, nextState)
这个方法在render调用前执行，可以作为组件更新发生前执行某些工作的地方，一般甚少用到。
componentDidUpdate(prevProps, prevState)
组件更新后被调用，可以作为操作更新后的DOM地方，这两个参数为更新前的参数。
卸载阶段
componentWillUnmount
这个方法在组件被卸载前调用，可以在这里执行一些清理工作，比如清理组件的定时器，避免引起内存泄漏。
列表和Keys
React使用key属性来表示列表中的每个元素，当列表数据发生变化时，React就可以通过key知道那些元素发生变化，从而只重新渲染发生变化的元素，提高渲染效率。虽然可以使用数据的索引作为key值，但是一旦列表中的数据发生重排，不利于React的渲染优化。
事件处理
React中的事件时合成组件，并不是原生的DOM组件。
使用箭头函数
直接在React元素中采用箭头函数定义事件的处理函数
<button onClick={(event)=>{console.log(this.state.number);}}>
箭头函数中的this指向的是函数定义时的对象，所以可以保证this总是指向当前组件的实力对象。但是render调用时，都会重新创建一个新的事件处理函数，带来额外的性能开销，组件所处层级较低，这种开销就越大。
使用组件方法
<button onClick={this.handleClick.bind(this)}></button>
使用bind会创建一个新的函数。
属性初始化语法
在clss定义的时候使用箭头函数。
handleClikc = (event) => {
}
表单
表单组件有些状态在默认的情况下不受React控制。
受控组件
React组件渲染表单组件，并在用户和表单元素交互时控制表单元素的行为，从而保证组件的state成为界面上所有元素状态唯一来源。
文本框
通过表单元素的value属性设置表单元素的值。通过表单元素的onChange事件监听值的变化。
列表
列表select元素时最复杂的表单元素。同样使用value属性值来决定哪一个option元素。
复选框和单选框
复选框是类型为checkbox的input元素，单选框类型是radio的input元素。
非受控组件
React中提供了一个特殊的属性ref，用来引用React组件或DOM元素的实例，因此我们可以通过表单元素定义ref属性获元素的值。
ref的值是一个函数，这个函数会接收当前元素作为参数。但是非控组件破坏了React对组件状态管理的一致性，不容易排查问题。