React入门

具体使用场景: 一个页面右上角挂载一个三级联动选项卡(三级数据从接口获取),main作为父组件主页面,select作为子组件三级选项卡页面

main页面负责ajax请求,拿总数据,为子组件准备好所有即插即用数据和方法,在使用select标签的时候,全部传递给子

select页面,在this.props中负责解构所有数据和方法,直接使用,无需关心逻辑实现

main叫逻辑组件(聪明组件), select叫UI组件(笨蛋组件)

render中return中的代码都是JSX,和html代码相似.

在js中直接写html语法,也可以使用自定义标签,比如可以写自己组件,App组件可以写成 ,首字母必须大写开头,JSX标签中,大写开头,基本都是组件,小写开头基本是html标签.

render中用JSX语法写html代码,必须在最外层包括一个div,不然编译会报错,在16版本中,如果使用Fragment来表示占位符,在html中显示的时候,可去掉组件最外层的那个div,demo如下

  // 你的jsx代码

使用js表达式/js变量需要使用{}把表达式包裹起来,demo如下

// ES6 ``,${}加三目运算符可处理复杂的css名字

// for循环遍历请使用map方法,sortTableRows是state中一个变量
 {sortTableRows && sortTableRows.map(item => (
      

        {item.title}
        {item.author}
        {item.comments}
        {item.points}
        
           onMiss(item.id)}>miss
        
      
))}

html标签中进行事件绑定,事件名称首字母必须大写,比如 onChange中C就是大写的

在html样式中,使用className来代替class

使用dangerouslySetInnerHTML={{__html: item}},可在提交数据的时候,对数据中html标签进行转义处理

输入内容 for需要换成htmlfor

jsx合成事件绑定,js高阶函数,绑定的是函数,不能让函数马上执行
不带参数绑定,后面不能加(), 如果加,那函数会马上执行,而不是事件发生时候回调执行
带参数绑定,需要在一个匿名函数中写绑定函数

// 合成事件绑定,不带参数
{item}
// 合成事件绑定,带参数
 this.props.delItem(index)}>{item}

1, state中设置searchTerm变量,用来填充input中value值
2, 绑定input中onChange事件,获取event对象中value值,将该值set到searchTerm变量中

state: 组件自己内部维护数据,每次更新只需要关系需要更改的数据
1, set数据不依赖之前的数据,直接调用setState

this.setState({ 
               foo: bar 
            })

2, set数据依赖之前数据,一定要使用带参数调用setState

this.setState((prevState, props) => (
    // 你的代码  
))

// bad
// setState是异步,代码中多个set,有可能fooCount和barCount已经被改变
const { fooCount } = this.state
const { barCount } = this.props
this.setState({ count: fooCount + barCount })
// good
this.setState((prevState, props) => (
    count: prevState.fooCount + props.barCount
))

props: 父->子,所有传递过来的数据都附加在props中,子在props中可以拿到所有父传递过来的数据
render: 只要state进行set操作,render一定会执行,包括父state进行set之后,父和子的render都会被执行

子组件是UI组件,接完父组件数据直接使用,可直接在子组件props中直接使用父组件ajax请求获取到的数据

子组件需要将父组件ajax数据赋值到自己的state中,只能在componentWillReceiveProps生命周期中处理,不能在constructor中处理,原因: 父组件ajax请求最起码第二次render父组件,而子组件中constructor只会执行一次

上述方式处理方式比较麻烦,推荐使用方式3
3, 父组件负责提供数据和处理处理的函数,子组件只负责获取数据,渲染页面,子组件事件交互,也是通过props来调用父组件中的函数(常用)

以下是使用场景和注意点
组件挂载阶段(只会执行一次,render除外)
constructor(): 设置state,获取父组件props,并初始化自己的state,并绑定函数中this指向
componentWillMount(): 不能获取页面dom元素,目前还没用过
render():渲染页面,不做运算,到这里为止,所有数据都应该是经过处理可直接使用的数据
componentDidMount(): 可获取dom元素,ajax请求放这里,调用setState,设置dom元素监听,绘制canvas
组件更新阶段(state或props发生变化)
componentWillReceiveProps(nextProps): nextProps为更新新属性,可进行新旧属性对比,也可以根据新数据来计算和设置自己的state
shouldComponentUpdate(nextProps, nextState): 返回布尔值,可做渲染优化,根据场景决定是否渲染该组件,不要调用setState
componentDidUpdate(prevProps, prevState): 操作 DOM 或者执行更多异步请求的机会
componentWillUnmount: 取消网络请求,删除监听,一些收尾工作,不要调用setState

自定义函数的时候,写自定义函数,需要在constructor中进行函数this指向的绑定

在constructor中进行this指向绑定,然后写正常函数

// 方式1
  getTodoItem = () => {
    // 你的逻辑
  }
// 方式2
 constructor(props) {
    super(props)
    this.inputOnChange = this.inputOnChange.bind(this)
  }
 inputOnChange() {
    // 你的逻辑
  }

ES6类组件: 有this,props,有state,有生命周期,根据设计图,一般当作父组件使用,从接口拿数据,计算成品数据,编写事件函数来处理数据
无状态组件(纯函数): 接收输入(props),输出jsx组件实例,没有this,没有生命周期,没有state,可根据props中的数据来计算符合自己要求的数据(组件中直接调用方法),
props中可以传递数据,也可以传递函数,一般当做子组件使用,demo如下

import React from "react"

/*查询表单组件
* Search在使用的时候,标签中间就是children
* 查询  children的值就是查询
*/
const Search = ({value, onChange, onSubmit, children}) => {
  return (
    

      

        
        {children}
      
    
  )
}

export default Search

import React from "react"
import {Slider} from "antd"
import moment from "moment"
import "./style.less"

/*
* 时间轴无状态组件
* timeData: 时间数组列表
* timeChange: 时间轴change事件的回调
* worktime: 当前选中时间
* */
const TimeSlider = ({timeData, timeChange, worktime}) => {

  /*
  * 获取时间轴当前选中值
  * */
  const getDefaultValue = () => {
    const { id } = times.find(item => {
      return item.dateTime === worktime
    })
    return id
  }

  /*
  * 获取时间轴的总长度
  * */
  const getMax = () => {
    return timeData.length
  }

  /*
  * 获取时间轴显示的time数据
  * 格式:
  * {
  *  0: "2019-11-11"
  *  24: "2019-11-12"
  *  23: "2019-11-13"
  * }
  * */
  let times = []
  const getMarks = () => {
    let dates = []
    console.log("timeData len", timeData.length)
    timeData.map((item, index) => {
      const time = {id: index, dateTime: item}
      times.push(time)
      dates.push(moment(item).format("YYYY-MM-DD"))
    })
    const newDates = [...new Set(dates)]

    console.log("newDates", newDates)
    let marks = {}
    let datesAmount = []
    newDates.map(item => {
      const amount = getDateAmount(item, timeData)
      const temp = {date: item, amount: amount}
      datesAmount.push(temp)
    })

    for (let i = 0,length = datesAmount.length; i < length; i++) {
      const date =  {
        style: {
          color: "#fff",
          marginLeft: 0
        },
        label: moment(datesAmount[i].date).format("MM/DD"),
      }
      if (i === 0) {
        //const mark =  JSON.parse(`{"0":"${date}"}`)
        const mark = {0: date}
        Object.assign(marks, mark)
      } else {
        const index = i - 1
        const lastAmount = getLastDateAmount(index, datesAmount)
       // const mark =  JSON.parse(`{"${lastAmount}":"${date}"}`)
        const mark =  { [lastAmount]: date }
        Object.assign(marks, mark)
      }
    }
    return marks
  }

  /*
  * 根据 2019-11-11来获取 数据 ["2019-11-11 11:11:11"] 对应的小时数量
  * */
  const getDateAmount = (date, timeData) => {
    let amount = 0
    for (let i = 0,length = timeData.length; i < length; i++ ) {
      const item = timeData[i]
      if (item.includes(date)) {
        amount = amount + 1
      }
    }
    return amount
  }

  /*
  * 获取当前index往前推一个的所有小时数量
  * */
  const getLastDateAmount = (index, datesAmount) => {
    let sum = 0
    for (let i = 0; i <= index; i++) {
      sum = sum + datesAmount[i].amount
    }
    return sum
  }


  const formatter = (value) => {
    const time = times.find(item => {
      return item.id === value
    })
    return moment(time.dateTime).format("HH:mm")
  }

  const onTimeChange = (value) => {
    const time = times.find(item => {
      return item.id === value
    })
    timeChange(time.dateTime)
  }

  return (
    

      
    
  )
}

export default TimeSlider

React Developer Tools // F12,查看每个react组件中state和props的值

Redux DevTools // F12,查看redux中store的值