React的常用组件概念及生命周期

创建一个React元素/节点，它是一个普通的JS对象，用来描述真实元素（描述对象）

import React from 'react';
let h1Ele = React.createElement(
 "h1",
 {
  style:{
   color:'red'
  }
 }
 ,
 "hello word")

添加节点在页面上，每个子节点需要一个唯一的key

import ReactDOM from 'react-dom';
ReactDOM.render(h1Ele,document.querySelector("#root"));

JSX(JavaScript XML)XML是一种类似于HTML的数据结构

reactz组件化

创建组件有2种方式，class类组件和函数式组件

类组件的创建方式

export default class Counter extends React.Component {
  state = {
    count: 0
  }
  addcount = () => {
    this.setState({
      count: this.state.count + 1,
    })
  }
  minus = () => {
    this.setState({
      count: this.state.count - 1,
    })
  }
  render() {
    return (
      <div>
        <Count count={this.state.count}/>
        <Count1 count={this.state.count}/>
        <IButton name="+" onClick={this.addcount} />
        <IButton name="-" onClick={this.minus} />
      </div>
    )
  }
}

 

函数式组件创建方式

let Count1= ({count=0,a=0 }={}) => {
    return (
        <Fragment>
            <h1>你一共点了{count}次</h1>
        </Fragment>)
}
export default Count1

 

state跟props之间的区别

1、state是什么，props是什么

state:组件本地的状态，可变

（应用数据变更时，修改的是state）

props:组件对外的接口，不可变

（不会主动的对props进行赋值，随着state的更新而跟新）

MVC

容器组件：拥有自身的状态跟操作状态的方法，他通常用来组装其他的组件

纯组件：没有自身的状态

受控组件跟非受控组件

 

     <div>
                    爱好：
                  {hobbies.map(item => {
                    return <label key={item.id}>
                        <input
                            checked={this.isChecked(item.id)}
                            onChange={(e) => {
                                this.togglehobbies(e.target.checked, item)
                            }}
                            type="checkbox"
                            name="hobbies"
                            value={item.value} />
                        {item.text}
                    </label>
                })}
                </div>

 

生命周期

可以修改props里的值

 static getDerivedStateFromProps(*props*) {
​
  }