react学习总结1--基础（一）
react 学习总结–基础（一）
说明
React 版本 ：”15.4.1”
react-tap-event-plugin 版本： “^2.0.1”
1.react 是什么
React 是 Facebook 内部的一个JavaScript类库，可用于创建Web用户交互界面。他引入了一种新的方式来处理浏览器DOM，只需要声明式的定义各个时间点的用户界面，无需关心数据变化时需要更新那一部分DOM。在任何时间点，React都能以最小的DOM修改来更新整个应用程序。
react 的特点
react 将原本的DOM操作接管，提出了 Virtual DOM(虚拟DOM)、单项数据流、用很少的接口覆盖在组件开发的生命周期上，采取声明式的语法等，实现了一个纯粹的组件“引擎”。
react 鼓励你为每一个关注点创造一个独立的组件，并把所有的逻辑和标签封装在其中
一个完整的例子
import React,{Component} from 'react';
import ReactDOM from 'react-dom';
export default class Child extends Component{
constructor(props){
super(props);
}
render(){
return (
<div>this is componentdiv>
)
}
}
ReactDOM.render((
2.JSX
JSX 即 JavaScript XML 一种在React组件内部构建标签的类XML语法。React在不使用JSX的情况下一样可以工作，然而使用JSX可以提高组件的可读性
JSX 以干净整洁的方式保证了组件中的标签与所有业务逻辑的相互分离，他不仅提供了一个清晰、直观的方式来描述组件树，同时还让你的应用程序更加符合逻辑
JSX 与 HTML 有何不同
JSX 以与 HTML 同样的方式给每个节点设置属性，同时还提供了将属性设置为动态的JavaScript变量的便利
HTML：
JSX：
属性值{}可以设置为一个函数调用的返回结果，但是不能直接加入if/else逻辑，解决的办法就是使用以下运算符
- 使用三目运算符
flag ? true : false; - 设置一个变量并在属性中引用他
- 讲逻辑转化到函数中
- 使用 && 运算符
非DOM属性 key（键） / ref（引用）
事件，react的事件名已经被规范化并统一用驼峰形式表示，例如click变为onClick
注释，jsx本质就是JavaScript，注释有两种形式
- 当做一个元素的子节点 {/* 子节点 */}
内容
- 内联在元素的属性中 内容
特殊属性 for => htmlFor , class => className
样式，内联样式，只需要把驼峰形式的命名和期望的css值拼接成对象即可
3.组件的生命周期
实例化阶段
一个实例初次被调用时的生命周期方法，首次使用一个组件类时，下面这些方法依次被调用：
- getDefaultProps
- getInitialState
- componentWillMount
- render
- componentDidMount
再次调用组件类创建新的实例时，除 getDefaultProps 外都会被重新调用
getDefaultProps
在组件类创建的时候调用一次，这个方法返回的对象用于为实例设置默认的props值，会合并到 this.props
该方法返回的任何复杂的值，例如对象和数组，都会在所有实例中共享，而不是拷贝或者克隆
getDefaultProps(){
return {
title : ''
};
}getInitialState
对组件的类的每个实例来说，只调用一次，返回值作为this.state的初始值，在这个方法里，已经可以访问到 this.props
getInitialState(){
return {
list : []
}
}componentWillMount
该方法会在完成首次渲染之前被调用，且只调用一次，此方法中可以感知到state，是render之前修改 state的最后一次机会，修改state之后不会再次调用
constructor(props) {
super(props);
this.state = {
num : 0
};
}
componentWillMount() {
console.log(this.state.num); //0，只会打印一次
this.setState({num:2});
}render
render 是组建唯一一个必须的方法，在这里会创建一个虚拟的DOM，来表示组件的输出
render 中需要遵守特定的规则
- 只能通过 this.props 和 this.state 访问数据
- 可以返回任何 React 组件 或者 null，false 来表明不需要渲染任何东西，React 渲染一个
标签来处理当前的差异检查逻辑 - 只能出现一个顶级组件（不能返回一组元素）
- 必须纯净，此方法内不要修改组件的 state ，不读写DOM信息，也不要和浏览器交互
render 方法返回的结果不是真正的DOM，而是一个虚拟的表现，React随后会把它和真实的DOM做对比，来判断是都有必要做修改
render() {
return (
<div className="container">
<div style={{display : this.state.close ? 'none' : 'block'}} className="header">
{this.props.headerText}
div>
<div className="content">
{this.props.content}
div>
div>
}componentDidMount
render 方法成功调用 初始化渲染执行之后立刻调用一次，仅客户端有效（服务器端不会调用），在此阶段中，可以访问真实的DOM元素，如果想与其他框架集成，可以在此方法中进行
componentDidMount(){
console.log(ReactDOM.findDOMNode(this.refs.a)); //输出真实的DOM节点
}存在期
此时组件已经渲染好，并且用户可以与它进行交互，
随着应用状态的改变，下列方法依次被调用
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
componentWillReceiveProps
在任意时刻，组件的props都可以通过父辈组件来更改，在组建接收到新的props的时候就会调用此方法，在初始化渲染的时候此方法不会被调用，在函数中调用this.setState()将不会引起第二次渲染
componentWillReceiveProps(nextProps) {
if (nextProps.checked !== undefined) {
this.setState({
checked : nextProps.checked
})
}
}shouldComponentUpdate
在接收到新的props或者state，将要渲染之前调用，通过返回的true/false决定组件是否更新
如果返回 false ，那么render 将不会被执行，componentWillUpdate 和 componentDidUpdate 也不会被执行
shouldComponentUpdate(nextProps, nextState) {
if (nextProps.num === this.props.num && nextState.num === this.state.num) {
return false;
}
}componentWillUpdate
组件在接收到新的props或者state之前立刻调用，做一些更新前的准备，不能在此方法中调用this.setState()，需要更新state或者props可以再 componentWillReceiveProps中更新
componentWillUpdate(nextProps, nextState) {
console.log(nextProps);
console.log(nextState);
}componentDidUpdate
与 componentDidMount 类似的方法，给了我们更新已经渲染好的DOM的机会，可以操作真实DOM
componentDidUpdate(prevProps, prevState) {
console.log(prevProps);
console.log(prevState);
}销毁期
组件被使用完成后
- componentWillUnmount
componentWillUnmount
组件被移除前调用，执行必要的清理任务，例如无效的定时器，在componentDidMount中创建的DOM元素等
componentWillUnmount() {
clearInterval(this.timer);
}4.下一篇内容传送门
- react 数据流
- 事件处理
- 复合组件
- DOM操作
- 表单