React初学

React

​ state数据+JSX模版–>生成真实DOM(生成虚拟DOM–JS对象)，显示

1.自定义组件

import React,{Component} from "react";

class Test extends Component{
    render(){
        return <div>TOdo</div>
    }
}

export default Test

2.绑定数据

import React, { Component,Fragment } from "react";

class Test extends Component {
		// 每个组件都有构造函数
    constructor(props){
				// 固定模式
        super(props);
				// 数据传递
        this.state = {
            inputValue: '',
						list:['dasda','cas','vsd']
        }
    }
    render() {
			return (
			 <Fragment>
            <div>
              {/* 绑定change事件 绑定this的指向*/}
              <input 
                  value={this.state.inputValue}
                  onChange={this.handleInputChange.bind(this)}
              />
         		</div>  
         			{/* 绑定点击事件*/}
         		<button onClick={this.handleBtnClik.bind(this)>submit</button>
				</Fragment>
			)
		}
		handleInputChange(e){
				console.log(e)
				// 设置数据
        this.setState({
            inputValue: e.target.value  
        }) 
    }
		handleBtnClik(){
        this.setState({
            // ...this.state.list 将原数组遍历生成新的数组
						// react不建议直接修改原数组的值（immutable）
            list:[...this.state.list,this.state.inputValue],
            inputValue: ''
        }) 
    }
}
export default Test

注：普通绑定数据无法识别html标签，只是当字符串直接显示。如果需要识别html标签，使用dangerousSetInnerHTML={{__html:

abd

}}

3.组件传值

​ 组件之间可以传属性，也可以传方法

​ 引入PropTypes，对传值做类型校验

import React,{Component} from "react";
import Test2 from "./Test2";
import PropTypes from "prop-types";

class Test1 extends Component{
    render(){
        return (
        <div><Test2 content='pare'/></div>
        )
    }
}

export default Test1

import React,{Component} from "react";

class Test2 extends Component{
    render(){
				const {content} = this.props;
        return <div>{content}</div>
    }
}

Test2.propTypes={
		// 如果类型不匹配，会给出警告⚠️，但是程序依然会运行
		// isRequired要求必须传，如果没有这个不传值的话也不会做类型校验
    content: PropTypes.string.isRequired
}
// 如果没传值，则给出默认值
TodoItem.defaultProps={
    content: 'hello'
}
export default Test2

当组件的state和props发生改变的时候，render函数就执行一次

数据视图更新原理

• state数据
• JSX模版
• 数据+JSX模板 生成虚拟的DOM(js对象)
  • React.craeteElement(‘div’,{},‘ada’)
    • ‘div’,{},‘ada’–>js对象
• 用虚拟DOM的结构生成真实的DOM，页面显示
• 当state发生变化后，数据和模板将生成新的虚拟DOM(js对象)
• 比较原始虚拟DOM和新的虚拟DOM的区别
  • Diff算法
    • 多次setState合并到一次
    • 同层比对
    • key值用来提高循环比对的性能(key值最好不要使用index，因为index不稳定，会增加比对的难度)
• 直接操作DOM，改变内容

生命周期函数

• Mounting

  • componentWillMount()–>组件即将被挂载到页面上的时刻自动执行

  • render()–>当组件的state和props发生改变的时候，执行

  • componentDidMount()–>挂载之后执行

• updation

  • props
    • componentWillReceiveProps()–>一个组件要从父组件接受参数；并且这个组件之前已经存在于父组件中，才会执行(即第一次的时候不会执行，第二次往后才会执行)
    • shouldComponentUpdate()–>组件被更新之前执行，返回true往下执行，返回false后的函数不执行(可通过此特性提交性能，减少不必要的DOM比对)
    • componentWillUpdate()–>组件被更新之前执行，在shouldComponentUpdate之后执行
    • render()
    • componentDidUpdate()–>组件更新之后执行
  • states
    • shouldComponentUpdate()
    • componentWillUpdate()
    • render()
    • componentDidUpdate()

• Unmounting

  • componentWillUnmount()–>组件即将被剔除时执行
    

更多内容参考官网：https://reactjs.org/