React 学习(二)

props state render

• 当组件的state或props发生变化,render函数就会执行
• 当父组件的render函数重新执行时子组件的render也会被执行
  父组件:

import React, {Component, Fragment} from 'react'
import Child from './child'

class Parent extends Component{
    constructor(props) {
        super(props);
        //当组件的state或props发生变化,render函数就会执行
        this.state = {
            content: "",
        };
        this.handleInputChange = this.handleInputChange.bind(this);
    }

    render() {
        console.log("render");
        const { content } = this.state;
        return (
            <Fragment>
                <div>parent</div>
                <input onChange={this.handleInputChange}/>
                <Child content={content}/>
            </Fragment>
        );
    }

    handleInputChange(e) {
        const value = e.target.value;
        this.setState(() => ({
            content: value,
        }));
    }
}

export default Parent

子组件：

import React, {Component} from 'react'

class Child extends Component{
    render() {
        console.log("child render")
        const { content } = this.props;
        return (
            <div>{content}</div>
        );
    }
}

export default Child

虚拟Dom

render() {
    //JSX->createElement->虚拟DOM（js对象）->真实的dom
    //return <div>item</div>;
    return React.createElement("div", {}, 'item')
}

原理：

React会在内存中维护一个虚拟DOM树，对这个树进行读或写，实际上是对虚拟DOM进行。当数据变化时，React会自动更新虚拟DOM，然后将新的虚拟DOM和旧的虚拟DOM进行对比，找到变更的部分，得出一个diff，然后将diff放到一个队列里，最终批量更新这些diff到DOM中。

优点：

性能提升
跨端应用得以实现 React Native

ref使用

修改todolist代码

<input
    id="insertArea"
    value={this.state.inputValue}
    onChange={this.handleInputChange}
    ref={(input) => {this.input = input}}
/>
handleInputChange(e) {
    //const value = e.target.value;
    const value = this.input.value;
    this.setState(() => ({
        inputValue: value,
    }));
}

this.input指向了<input/>的dom节点

注意事项：

<ul ref={(ul) => {this.ul = ul}}>
    {this.getToDoItem()}
</ul>
handleButtonClick(index) {
    this.setState((prevState) => ({
        list: [...prevState.list, prevState.inputValue],
        inputValue: "",
    }), () => {
        console.log(this.ul.querySelectorAll("li").length)
    });
}

console.log(this.ul.querySelectorAll(“li”).length)
要在setState第二个参数后使用，由于setState是异步执行
所以如果不放在setState执行后调用会导致dom节点数获取不对

生命周期函数

定义：在某一时刻组件会自动调用的函数

//组件挂载到页面之前执行(render函数执行前)
componentWillMount() {
    console.log("componentWillUnmount")
}
//组件挂载到页面之后执行(render函数执行后)
componentDidMount() {
    console.log("componentDidMount")
}
//组件更新前执行
shouldComponentUpdate() {
    return true or false    //当return false 时当前组件的值更新会被禁用
}
//组件更新前shouldComponentUpdate后执行
componentWillUpdate() {
    console.log("componentWillUpdate")
}
//当一个组件从父组件接收参数
//如果这个组件第一次存在于父组件中，不会被执行
//如果这个组件之前存在于父组件中，才会被执行
componentWillReceiveProps() {
    console.log("child componentWillReceiveProps" )
}
//当这个组件即将在页面中被剔除
componentWillUnmount() {
    console.log("child componentWillUnmount")
}