react

一.react脚手架

• create-react-app
  vue脚手架：vue-cli

二.创建项目

2.1

• 1.npx create-react-app my-app
• 2.npm start
• npm run eject 暴露webpack配置（不是必须）

2.2 官方提供的方法

• npx#

npx create-react-app my-app
(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

• npm#

npm init react-app my-app
npm init <initializer> is available in npm 6+

• yarn#

yarn create react-app my-app
yarn create is available in Yarn 0.25+

三.定义

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

四.用法

4.1 基本用法

import React from 'react';
import ReactDOM from 'react-dom';

const msg='数据渲染'

const flag=true
function show(){
  if(flag){
    return 'true'
  }else{
    return 'false'
  }
}

const list=[
  {
    id:0,
    name:'fly'
  },
  {
    id:1,
    name:'小燕纸'
  },
  {
    id:2,
    name:'sky'
  }
]

ReactDOM.render(
  <div>
    <h1>1.数据渲染</h1>
    {msg}
    <br />
    <h1>2.条件渲染</h1>
    {flag?'true':'false'}
    <br />
    {show()}
    <h1>3.列表渲染</h1>
    {
      list.map(item=>{
        return(
          <div key={item.id}>
            {item.id}---{item.name}
          </div>
        )
      })
    }
    <br />
    <h1>4.属性绑定</h1>
    {/* 
      vue:
      <div :id='title'></div>

      wx小程序：
      <div id={{box}}></div>
    */}
    {/* jsx */}
    <div id={'title'} className='color'>属性绑定</div>
  </div>,
  document.getElementById('root')
);

4.2 样式绑定

• sass的版本：

  "node-sass": "^4.0.0",
  "sass-loader": "10.0.1"

    import './index.scss'
    import classNames from 'classnames'
    import styled from "styled-components";

    const MyDiv=styled.h2`
      color:orange
    `

    const styleObj={
      color:"blue"
    }


    <h1>5.样式绑定</h1>
    <div className='title'>
      className 样式使用
    </div>
    <div className={classNames({title:true})}> 
        classNames控制样式的添加
    </div>
    <div style={styleObj}>
        style样式使用
    </div>
    <MyDiv>
      styled-components 样式的使用
    </MyDiv>

4.3 传参的方式

import React, { Component } from 'react'

export default class Demo1 extends Component {
  // 方式三：在构造函数中改变this
  constructor(){
    super()
    this.handleClick=this.handleClick.bind(this)
  }
  state={
    msg:'demo1'
  }
  render() {
    return (
      <div>
        <h2>
          {this.state.msg}
        </h2>
        <br />
        {/* 方式一：通过bind改变this的指向,可以获取event对象*/}
        <button onClick={this.handleClick.bind(this,1)}>点我1</button>
        <br />

        {/* 方式二：通过箭头函数改变this的指向传参*/}
        <button onClick={()=>this.handleClick(1)}>点我2</button>
        <br />

        {/* 方式三：通过构造函数改变this的指向,并用自定义属性的方法传参*/}
        <button onClick={this.handleClick1} data-id={1}>点我3</button>
        <br />

        {/* 方式四：双向数据绑定 */}
        <input type="text" value={this.state.msg} onChange={this.handleValue} />
      </div>
    )
  }

  handleClick(e){
    console.log(e);
  }
  handleClick1(e){
    console.log(e);
    console.log(Number(e.target.dataset.id))
  }
  handleValue=(e)=>{
    console.log(e.target.value)
    this.setState({
      msg:e.target.value
    })
  }
}

4.4 修改数据的方法

import React, { Component } from 'react'

export default class Demo3 extends Component {
  state={
    count:1
  }
  render() {
    return (
      <div>
        {this.state.count}
        <button onClick={this.handleAddCount}>+</button>
      </div>
    )
  }
  handleAddCount= async ()=>{

    // 方法一：修改的数据不需要用到原数据
    // this.setState({
    //   count:this.state.count +=1
    // })
    // console.log(this.state.count)


    // 方法二：修改的数据需要用到原数据，由于setState是异步
    // this.setState(state=>{
    //   return{
    //     count:this.state.count +=1
    //   }
    // },()=>{

    //   console.log(this.state.count)
    // })

    // 方法三：修改的数据需要用到原数据，由于setState是异步，所以用async和await
    await this.setState(state=>{
      return{
        count:this.state.count +=1
      }
    })
    console.log(this.state.count)
  }
}

4.5 绑定函数的方法

import React, { Component } from 'react'

export default class Demo1 extends Component {
  // 方式三：在构造函数中改变this
  constructor(){
    super()
    this.handleClick=this.handleClick.bind(this)
  }
  state={
    msg:'demo1'
  }
  render() {
    return (
      <div>
        {/* 方式一：通过bind改变this的指向,可以获取event对象*/}
        <button onClick={this.handleClick.bind(this)}>点我1</button>
        <br />

        {/* 方式二：通过箭头函数改变this的指向，可以传入具体的数值*/}
        <button onClick={()=>this.handleClick(1)}>点我2</button>
        <br />

        {/* 方式三：在构造函数中改变this,可以获取event对象*/}
        <button onClick={this.handleClick}>点我3</button>
        <br />

        {/* 方式四：以箭头函数定义方法,可以获取event对象*/}
        <button onClick={this.handleClick1}>点我4</button>
        <br />
      </div>
    )
  }

  handleClick(e){
    console.log(e);
    console.log(this.state.msg)
  }
  // 方式四：以箭头函数定义方法，不建议传参不点击会直接触发
  handleClick1=(e)=>{
    console.log(e);
    console.log(this.state.msg)
  }
}

4.6 受控组件与非受控组件的区别

• 1.受控组件：值受到react控制的表单元素，受控组件适用于双向数据绑定

import React, { Component } from 'react'

export default class ShouKong extends Component {
  state={
    value:'受控组件'
  }
  render() {
    return (
      <div>
        <h2>
          {this.state.value}
        </h2>
        <input type="text"  value={this.state.value} onChange={this.handleChange}/>
      </div>
    )
  }
  handleChange=(e)=>{
    this.setState({
      value:e.target.value
    })
  }
}

• 2.非受控组件：
  • 说明：借助于ref，使用元素DOM方式获取表单元素值
  • ref的作用：获取DOM或者组件

2.1使用步骤
调用 React.createRef() 方法创建ref对象
将创建好的 ref 对象添加到文本框中
通过ref对象获取到文本框的值

import React, { Component,createRef } from 'react'

export default class FeiShouKong extends Component {
  constructor(){
    super()
    this.inputRef= createRef()
  }
  render() {
    return (
      <div>
        {/* <input type="text" ref='inputRef'/> */}
        <input type="text" ref={this.inputRef}/>
        <button onClick={this.handleGetValue}>handleGetValue</button>
      </div>
    )
  }
  handleGetValue=()=>{
    // console.log(this.refs.inputRef.value)
    console.log(this.inputRef.current.value)
  }
}

4.7 react中父子传值，Rfc与Rcc的区别

• Rfc无状态组件：即没有state,子组件中通过props接收父组件的数据
  Rfc适用于页面的渲染

子组件中：
import React from 'react'

export default function Rfc(props) {
  return (
    <div>
      无状态组件---{props.title}----{props.children}
    </div>
  )
}

父组件中：
  state={
    msg:'父组件的数据'
  }
<Rfc title={this.state.msg}>{this.state.msg}</Rfc>

• Rcc：有状态的组件，用this.props.接受父组件的数据

子组件中：
 constructor(props){
    super(props)
    this.state={
      title:props.title
    }
  }
  render() {
    return (
      <div>
        有状态组件-----{this.state.title}---{this.props.children}
      </div>
    )
  }


父组件中：
        {/* 第一方法：直接传值 */}
        <Rcc title={this.state.msg}>
          {/* 第二种方法：可以直接传某个ui，可以直接在父组件中修改子组件的ui 相当于vue中的插槽*/}
        
          <mark>
            {this.state.msg}
          </mark>
        </Rcc>

• 组件之间直接传值：子组件直接用props.children接收

子组件Rfc中：
    <div>
      无状态组件---{props.title}----{props.children}
    </div>

子组件Rcc中：
    <div>
      有状态组件-----{this.state.title}---{this.props.children}
    </div>


父组件中：
<Rfc title={this.state.msg}>{this.state.msg}</Rfc>
<Rcc title={this.state.msg}>
          {/* 第二种方法：可以直接传某个ui，可以直接在父组件中修改子组件的ui 相当于vue中的插槽*/}
          <mark>
            {this.state.msg}
          </mark>
        </Rcc>

4.8 子传父

• 在子组件中用this.props.getSonData来接受父组件中的方法，并在子组件中传值，在父组件中用this.setState({})改变原来的值
  注：不可用this.props.msg='子组件的数据'修改父组件的值，因为这个值是只读的

父组件中：
import React, { Component } from 'react'
import Com1 from './Com_1'

export default class index extends Component {
  state={
    msg:'父组件'
  }
  render() {
    return (
      <div>
        <h2>
          {this.state.msg}
        </h2>
        <Com1 getSonData={this.getSonData}></Com1>
      </div>
    )
  }
  getSonData=(data)=>{
    console.log(data)
    this.setState({
      msg:data
    })
  }
}


子组件中：
import React, { Component } from 'react'

export default class Com_1 extends Component {
  render() {
    return (
      <div>
        com1
        <button onClick={this.setData}>给父组件传递数据</button>
      </div>
    )
  }
  setData=()=>{
    this.props.getSonData('子组件的数据')
  }
}

4.9 兄弟传值

• 1.com2组件用于只做页面渲染，在组件中用props.count接收数据
• 2.com2中的数据修改由组件com1管理，在com1组件中用this.props.click接收父组件绑定的方法

在父组件中：
  state={
    msg:'父组件',
    count:1
  }

  <Com1 getSonData={this.getSonData} click={this.addCount}></Com1>

  {/* com2只做页面的渲染，count 数据的修改由Com1管理 */}
  <Com2 count={count}></Com2>

  // 修改数据
  addCount=(data)=>{
    console.log(2);
    this.setState(state=>{
      return{
        count:state.count+=data
      }
    })
  }

  在子组件com2中：
   Com2----{props.count}

  在子组件com1中：
  <button onClick={()=>this.props.click(2)}>+</button>
}