React基础（一）

什么是React
1、用来构建UI的 JavaScript库
2、React 不是一个 MVC 框架，仅仅是视图（V）层的库
特点
1、使用 JSX语法 创建组件，实现组件化开发，为函数式的 UI 编程方式打开了大门；
2、性能高的让人称赞：通过 diff算法 和 虚拟DOM 实现视图的高效更新

为什么要用React
1、使用组件化开发方式，符合现代Web开发的趋势；
2、技术成熟，社区完善，配件齐全，适用于大型Web项目（生态系统健全）；
3、使用方式简单，性能非常高，支持服务端渲染
React中的核心概念
1、虚拟DOM（Virtual DOM）
2、Diff算法（虚拟DOM的加速器，提升React性能的法宝）

虚拟DOM（Vitural DOM）
React将DOM抽象为虚拟DOM，虚拟DOM其实就是用一个【JS对象】来描述DOM，通过对比前后两个对象的差异，
最终只把变化的部分重新渲染，提高渲染的效率
VituralDOM的处理方式
1 用 JavaScript 对象结构表示 DOM 树的结构，然后用这个树构建一个真正的 DOM 树，插到文档当中
2 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异
3 把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了
key 属性

说明：key属性在React内部使用，但不会传递给你的组件
推荐：在遍历数据时，推荐在组件中使用 key 属性：<li key={item.id}>{item.name}</li>
注意：key只需要保持与他的兄弟节点唯一即可，不需要全局唯一
注意：尽可能的减少数组index（数组元素的脚标）作为key，数组中插入元素的等操作时，会使得效率底下

React的基本使用
import React from ‘react’：
react 是React库的入口点
import ReactDOM from ‘react-dom’
react-dom：提供了针对DOM的方法，比如：把创建的虚拟DOM，渲染到页面上
JSX的相关内容
JSX 其实就是 JavaScript 对象,JSX 在编译的时候会变成相应的 JavaScript 对象描述
React.js 可以用 JSX 来描述你的组件长什么样的。
react-dom 负责把这个用来描述 UI 信息的 JavaScript 对象变成 DOM 元素，并且渲染到页面上。
注意 1: 如果在 JSX 中给元素添加类, 需要使用 className 代替 class
类似：label 的 for属性，使用htmlFor代替
注意 2：在 JSX 中可以直接使用 JS代码，直接在 JSX 中通过 {} 中间写 JS代码即可
注意 3：在 JSX 中只能使用表达式，但是不能出现 语句！！！
注意 4：在 JSX 中注释语法：{/* 中间是注释的内容 */}
注意 5：JSX 元素，必须要用一个外层的 JSX 元素把所有内容包裹起来。返回并列多个 JSX 元素是不合法的：

render () {
  return (
    <div>
      <div>第一个</div>
      <div>第二个</div>
    </div>
  )
}

注意 6：JSX 元素其实可以像 JavaScript 对象那样自由地赋值给变量，或者作为函数参数传递、或者作为函数的返回值。

React组件

React 组件可以让你把UI分割为独立、可复用的片段，并将每一片段视为相互独立的部分。
组件是由一个个的HTML元素组成的
概念上来讲, 组件就像JS中的函数。它们接受用户输入（props），并且返回一个React对象，用来描述展示在页面中的内容

React创建组件的两种方式
方式1： 通过 JS函数 创建（无状态组件）
方式2： 通过 class 创建（有状态组件）
函数式组件 和 class 组件的使用场景说明：
1 如果一个组件仅仅是为了展示数据，那么此时就可以使用 函数组件
2 如果一个组件中有一定业务逻辑，需要操作数据，那么就需要使用 class 创建组件，因为，此时需要使用 state
JavaScript函数创建注意事项
注意：1 函数名称必须为大写字母开头，React通过这个特点来判断是不是一个组件
注意：2 函数必须有返回值，返回值可以是：JSX对象或null
注意：3 返回的JSX，必须有一个根元素
注意：4 组件的返回值使用()包裹，避免换行问题

实例：
function Welcome(props) {
  return (
    // 此处注释的写法 
    <div className="shopping-list">
      {/* 此处 注释的写法 必须要{}包裹 */}
      <h1>Shopping List for {props.name}</h1>
      <ul>
        <li>Instagram</li>
        <li>WhatsApp</li>
      </ul>
    </div>
  )
}

ReactDOM.render(
  <Welcome name="jack" />,
  document.getElementById('app')
)

class创建注意事项：
在es6中class仅仅是一个语法糖，不是真正的类，本质上还是构造函数+原型 实现继承

// 创建react对象
// 注意：基于 `ES6` 中的class，需要配合 `babel` 将代码转化为浏览器识别的ES5语法
// 安装：`npm i -D babel-preset-env`
// react对象继承字React.Component
class ShoppingList extends React.Component {
  constructor(props) { 
    super(props)
  }
  // class创建的组件中 必须有rander方法 且显示return一个react对象或者null
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
        </ul>
      </div>
    )
  }
}

父子组件传递数据
1、父组件通过props给子组件进行数据传递
1）、组件中有一个 只读的对象 叫做 props，无法给props添加或修改属性
2）、获取方式：函数参数 props
3）、作用：将传递给组件的属性转化为 props 对象中的属性
4）、props.children：获取组件的内容，例如：内容中的“内容”

function Welcome(props){
  // props ---> { username: 'zs', age: 20 }
  return (
    <div>
      <div>Welcome React</div>
      <h3>姓名：{props.username}----年龄是：{props.age}</h3>
    </div>
  )
}
	
// 给 Welcome组件 传递 props：username 和 age(如果你想要传递numb类型是数据 就需要向下面这样)
ReactDOM.reander(<Hello username="zs" age={20}></Hello>, ......)

2、子组件向父组件传递数据：
父组件通过props传递回调函数给子组件，子组件调用函数触发即可
实例：

class Child extends React.Component{
  constructor(props){
    super(props);
    this.state = {}
  }
  
  render(){
    return (
      <div>
        {this.props.text}
        <br />
        <button onClick={this.props.refreshParent}>
            更新父组件
        </button>
      </div>
    )
  }
}
class Parent extends React.Component{
  constructor(props){
    super(props);
    this.state = {}
  }
  refreshChild(){
    return (e)=>{
      this.setState({
        childText: "父组件沟通子组件成功",
      })
    }
  }
  refreshParent(){
    this.setState({
      parentText: "子组件沟通父组件成功",
    })
  }
  render(){
    return (
      <div>
        <h1>父子组件沟通</h1>
        <button onClick={this.refreshChild()} >
            更新子组件
        </button>
        <Child 
          text={this.state.childText || "子组件未更新"} 
          refreshParent={this.refreshParent.bind(this)}
        />
        {this.state.parentText || "父组件未更新"}
      </div>
    )
  }
}

3、兄弟组件：

当两个组件有相同的父组件时，就称为兄弟组件（堂兄也算的）。按照React单向数据流方式，我们需要借助父组件进行传递，通过父组件回调函数改变兄弟组件的props。

class Brother1 extends React.Component{
  constructor(props){
    super(props);
    this.state = {}
  }
  
  render(){
    return (
      <div>
        <button onClick={this.props.refresh}>
            更新兄弟组件
        </button>
      </div>
    )
  }
}
class Brother2 extends React.Component{
  constructor(props){
    super(props);
    this.state = {}
  }
  
  render(){
    return (
      <div>
         {this.props.text || "兄弟组件未更新"}
      </div>
    )
  }
}
class Parent extends React.Component{
  constructor(props){
    super(props);
    this.state = {}
  }
  refresh(){
    return (e)=>{
      this.setState({
        text: "兄弟组件沟通成功",
      })
    }
  }
  render(){
    return (
      <div>
        <h2>兄弟组件沟通</h2>
        <Brother1 refresh={this.refresh()}/>
        <Brother2 text={this.state.text}/>
      </div>
    )
  }
}

各组件间的调用：

// 创建Hello2.js组件文件
// 1. 引入React模块
// 由于 JSX 编译后会调用 React.createElement 方法，所以在你的 JSX 代码中必须首先拿到React。
import React from 'react'

// 2. 使用function构造函数创建组件
function Hello2(props){
  return (
    <div>
      <div>这是Hello2组件</div>
      <h1>这是大大的H1标签，我大，我骄傲！！！</h1>
      <h6>这是小小的h6标签，我小，我傲娇！！！</h6>
    </div>
  )
}
// 3. 导出组件
export default Hello2

// app.js中   使用组件：
import Hello2 from './components/Hello2'

state状态
状态即数据
作用：用来给组件提供组件内部使用的数据
注意：只有通过class创建的组件才具有状态
注意：状态是私有的，完全由组件来控制
注意：不要在 state 中添加 render() 方法中不需要的数据，会影响渲染性能！
可以将组件内部使用但是不渲染在视图中的内容，直接添加给 this
注意：不要在 render() 方法中调用 setState() 方法来修改state的值

state和setState
注意：使用 setState() 方法修改状态，状态改变后，React会重新渲染组件
注意：不要直接修改state属性的值，这样不会重新渲染组件！！！
使用：1 初始化state 2 setState修改state

constructor(props) {
  super(props)

  // 正确姿势！！！
  // -------------- 初始化 state --------------
  this.state = {
    count: props.initCount
  }
}

componentWillMount() {
  // -------------- 修改 state 的值 --------------
  // 方式一：
  this.setState({
    count: this.state.count + 1
  })

  this.setState({
    count: this.state.count + 1
  }, function(){
    // 由于 setState() 是异步操作，所以，如果想立即获取修改后的state
    // 需要在回调函数中获取
    // https://doc.react-china.org/docs/react-component.html#setstate
  });
==========================================================================
  // 方式二：
  this.setState(function(prevState, props) {
    return {
      counter: prevState.counter + props.increment
    }
  })

  // 或者 - 注意： => 后面需要带有小括号，因为返回的是一个对象
  this.setState((prevState, props) => ({
    counter: prevState.counter + props.increment
  }))
}

style样式

// 1. 直接写行内样式：
<li style={{border:'1px solid red', fontSize:'12px'}}></li>

// 2. 抽离为对象形式
var styleH3 = {color:'blue'}
var styleObj = {
  liStyle:{border:'1px solid red', fontSize:'12px'},
  h3Style:{color:'green'}
}

<li style={styleObj.liStyle}>
  <h3 style={styleObj.h3Style}>评论内容：{props.content}</h3>
</li>

// 3. 使用样式表定义样式：
import '../css/comment.css'
<p className="pUser">评论人：{props.user}</p>

React中的事件绑定
注意：事件名称采用驼峰命名法
事件绑定中的this：
1 通过 bind 绑定
原理：bind能够调用函数，改变函数内部this的指向，并返回一个新函数
说明：bind第一个参数为返回函数中this的指向，后面的参数为传给返回函数的参数
注意：在构造函数中使用bind，提高性能

constructor() {
  super()

  this.handleBtnClick = this.handleBtnClick.bind(this)
}

// render() 方法中：
<button onClick={ this.handleBtnClick }>事件中this的处理</button>

2 通过 箭头函数 绑定
原理：箭头函数中的this由所处的环境决定，自身不绑定this

<input type="button" value="在构造函数中绑定this并传参" onClick={
  () => { this.handleBtnClick('参数1', '参数2') }
} />

handleBtnClick(arg1, arg2) {
  this.setState({
    msg: '在构造函数中绑定this并传参' + arg1 + arg2
  });
}

受控组件
受控组件的特点：
1 表单元素
2 由React通过JSX渲染出来
3 由React控制值的改变，也就是说想要改变元素的值，只能通过React提供的方法来修改
注意：只能通过setState来设置受控组件的值

// 模拟实现文本框数据的双向绑定
<input type="text" value={this.state.msg} onChange={this.handleTextChange}/>

// 当文本框内容改变的时候，触发这个事件，重新给state赋值
handleTextChange = event => {
  console.log(event.target.value)

  this.setState({
    msg: event.target.value
  })
}

props校验
作用：通过类型检查，提高程序的稳定性
命令：npm i -S prop-types
使用方法（一）：给类提供一个静态属性 propTypes（对象），来约束props

// 引入模块
import PropTypes from 'prop-types'

// ...以下代码是类的静态属性：
// propTypes 静态属性的名称是固定的！！！
static propTypes = {
  initCount: PropTypes.number, // 规定属性的类型
  initAge: PropTypes.number.isRequired // 规定属性的类型，且规定为必传字段
}

使用方法（二）：

class Component {
  ...
}
Component.PropsType = {
  title: React.PropTypes.string,
}

defaultProps默认值
如何设置组件默认的props？

//React提供的crateClass创建方式
var Component = React.createClass({
  getDefaultProps(){
    return {
      //这里设置defaultProps
    }
  }
})

//ES6
class Component {
  ...
}
Component.defaultProps = {}

//ES7 stage-0
class Component {
  static defaultProps = {
    
  }
  ...
}

React 单向数据流
React 中采用单项数据流
数据流动方向：自上而下，也就是只能由父组件传递到子组件
数据都是由父组件提供的，子组件想要使用数据，都是从父组件中获取的