React（1）之——React入门

React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。

创建react项目

npm install -g create-react-app
create-react-app react01

同Vue很相似，项目有一个入口文件，入口文件中的根组件会渲染到DOM树的根结点root下。

React和ReactDOM

React和ReactDOM是开发React项目必不可少的两个包。React负责逻辑控制，它用JSX来描述虚拟DOM以及用它的Component类来创建一个组件；而ReactDOM主要负责渲染，将构建好的虚拟DOM渲染成真实DOM到页面上。

来自官方的示例：这里面还涉及到另一个问题，JSX是什么？

class HelloMessage extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
}

ReactDOM.render(React.createElement(HelloMessage, { name: "Taylor" }), document.getElementById('hello-example'));
复制代码

相当于

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    )
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById('hello-example')
)
复制代码

JSX

JSX形如js和html的混合体，它在react代替常规的js语法。它的优点：1）执行更快，提高执行效率。2）使用我们更熟悉的html来描述UI，JSX在react转换为js的写法形如： React.createElement("div",null,"Hello ",this.props.name); ，写起来很繁琐。3）它是类型安全的，在编译过程中就能发现错误。

JSX就是html加上表达式，下面介绍一下一些表达式的写法：

import src from './static/img'
sayHi(){
    return 'hello, react'
}
render(){
    const name = 'zhunny'
    const jsx = '<p>jsx</p>'
    return(
        <div>
        {/*注释语法*/}
        {/*表达式*/}
        <h1>{name}</h1>
        <h1>{this.seyHi()}</h1>
        {/*属性的写法*/}
        <img src={src} style={{width:"200px"}}>
        {/*jsx也可以直接当成是表达式*/}
        {jsx}
        {/*只要是js表达式都可以放在{}里面*/}
        <div>
    )
}
复制代码

创建组件的两种形式

一种是函数类型组件，一种是基于类的组件。

//rfc 比较简洁，直接相当于render函数，但hooks的出现使得它们之间没有太大区别
import React from 'react'

export default function CompType() {
  return (
    <div>
      
    </div>
  )
}
//rcc 可以在类中使用各种生命周期钩子，在constructor构造函数中初始化state和props
import React, { Component } from 'react'

export default class CompType extends Component {
  render() {
    return (
      <div>
        
      </div>
    )
  }
}
复制代码

state和setState

state

使用组件时，可能会出现一些特别的状态，它们可能会改变因此影响视图的变化，因此我们需要去维护这些状态。凡是数据与视图有交互的时候，就需要将这些数据维护到状态state中去。state一般在构造函数constructor中初始化。

constructor(props) {
    super(props)
    this.state = {
      count:1
    }
 }
复制代码

setState

而setState是官方提供给我们用来修改state值的方法，千万不能直接修改state，会报错。使用setState修改state有两种方法，直接修改state对象 setState(obj,cb) ，或者传入一个修改函数 setState(fn,cb) 。因为state和setState是批量执行的，这样可以提升更新的性能，但是同时它会认为连续相同的操作形如 setState(obj,cb) 是一样的，只会执行最后一次。这个时候就需要使用第二种修改state的方法。

componentDidMount () {
  this.setState({
    count: this.state.count + 1
  })
}
复制代码

componentDidMount () {
  this.setState(preState => ({
    count:preState.count + 1
  }))
  this.setState(preState => ({
    count:preState.count + 1
  }))
}

复制代码

props属性传递

这是一种父组件向子组件传递属性的一种方式，父->子通信的方法。两种不同类型的组件在调用props时有差别。

//在父组件中  
import { Welcome1, Welcome2 } from './components/CompType'
export default class App extends Component {
    render () {
        return (
            <Welcome1 name="zhunnyWang" />
            <Welcome2 name="zhunnyWang" />
        )
    }
}
复制代码

//在子组件中  
//props传值，两种方式有区别，props是只读的
//单向绑定，严格的单向数据流
export function Welcome1 (props) {
  return (
    <div>
      Welcome1,{props.name}
    </div>
  )
}

export class Welcome2 extends React.Component {
  constructor(props){
    super(props)
  }
  render () {
    return (
      <div>Welcome2,{this.props.name}</div>
    )
  }
}
复制代码

条件渲染和列表渲染

这是在react使用最频繁的两种表达式写法。条件渲染有两种实现方式，一种是使用三元表达式，一种是使用短路逻辑。父组件向子组件传递了一个props为 title='goodlist' 。列表渲染就是循环的将一个数组中的元素显示在视图上。

export class GoodsList extends React.Component {
  constructor(props){
    super(props)
    this.state = {
        goods:[
         {id:1,name:'《你不知道的Javascript》'}
         {id:2,name:'《CSS世界》'}
        ]
    }
  }
  render () {
    const title = this.props.title ? <h1>{this.props.title}</h1> : null
    return (
      <div>
       {/*条件渲染的第一种方式，三元表达式*/}
       {title}
       {/*条件渲染的第二种方式，短路逻辑*/}
       {this.props.title && <h1>this.props.title</h1>}
       {/*列表渲染*/}
       <ul>
        {this.state.goods.map(good => (<li key={good.id}>{good.name}</li>))}
       </ul>
      </div>
    )
  }
}
复制代码

事件处理

react的事件处理与原生js形似，形如 onClick={this.fn} 。事件处理函数的声明有两种方式，一种是通过箭头函数，一种是普通函数但是需要在构造函数中绑定this。

export class GoodsList extends React.Component {
  constructor(props){
    super(props)
    this.state = {
        goods:[
         {id:1,name:'《你不知道的Javascript》'}
         {id:2,name:'《CSS世界》'}
        ],
        text: ''
    }
    //不用箭头函数就得绑定this
    this.addGood = this.addGood.bind(this)
  }
  textChange = (e) => {
    this.setState({
      text: e.target.value
    })
  }
  addGood () {
    /**
     * react官方希望这是一个纯函数
     * 更新的数据不是之前的数据，而是一个全新的数据
     */
    this.setState(prevState => {
      return {
        goods: [
          ...prevState.goods,
          {
            id: prevState.goods.length + 1,
            name: prevState.text
          }
        ]
      }
    })
  }
  render () {
    return (
      <div>
       {/*react严格遵循单向数据流，没有数据的双向绑定，因此需要自己来实现*/}
       <input type="text" text={this.state.text} onChange={this.textChange} />
       <button onClick={this.addGood}>添加商品</button>
       {/*需要在声明的事件处理函数中传入参数时，也需要借用箭头函数来传参*/}
       <button onClick={() => {this.addToCart(good)}}>添加商品</button>
      </div>
    )
  }
}

复制代码

组件的通信

父传子可以使用props来传递，上述章节已经给出示例。子传父也需要借助props传递一个回调函数，通过回调函数来触发父组件中的方法，用父组件中的函数来修改子组件中的值。这与vue有很大的差异，react希望子组件是一个非常单纯的组件，它只有展示功能，所有的操作在父组件中完成。

//父组件 
export class Counter extends React.Component {
  constructor(props){
    super(props)
    this.state = {
        count:1
    }
  }
  add = (value) => {
    this.setState(prevState => {
        count: preState.count + value 
    })
  }
  render () {
    return (
      <div>
        <Add count={this.state.count} add={this.add}></Add>
      </div>
    )
  }
}
//子组件
export function Add ({ count, add }) {
    return(
        <div>
            {count}
            <button onClick={add(10)}></button>
        </div>
    )
}
复制代码