React 学习笔记

函数组件/类定义组件

使用普通的JavaScript函数即可定义一个React组件：

function MyComponent(props) {
    return 
Props value: {props.value}
;
}

函数接受一个单一的props对象，返回值是React元素，这种方式就是函数定义组件，即组件是一个函数。使用ES6的Class也可以定义一个组件：

class MyComponent extends React.Component {
    render() {
        return 
Props value: {this.props.value}
;
    }
}

组件的props与state

pros是一个组件的属性，是只读的，不可以对组件的属性进行写操作。state是一个组件的状态对象，包含了组件在不同生命周期的各种状态数据。注意以下几点：

• 状态不可以直接更新，需要使用setState函数来更新
• 状态只能在构造函数中初始化
• 调用setState更新状态时，提供的对象会被合并到当前组件状态中
  • 独立更新
  • 浅合并

父组件通过设置子组件的props来向下传递数据，即数据是从上到下单向流动的。

事件处理

几个注意点：

• return false不会阻止默认行为，需要使用以下方式：

function ActionLink(props) {
    function handleClick(e) {
        e.preventDefault();
        console.log('Link has been clicked');
    }

    return (
        
            Click me.
        
    )
}

• ES6的语法不会将类的方法默认绑定到this上，因此在绑定事件处理函数时需要在构造器中显式声明：

class Toggle extends Component {
    constructor(props) {
        super(props);
        this.state = {isToggleOn: true};

        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(e) {
        this.setState(prevState => ({
            isToggleOn: !prevState.isToggleOn
        }));
    }

    render() {
        return (
            
                {this.state.isToggleOn ? 'ON' : 'OFF'}
            
        )
    }
}

如果不想使用bind，则有两种语法可以支持：

//babel提供的属性初始化语法，适用于不传参数的监听函数
class Toggle extends Component {
    handleClick = (e) => {
        //...
    }
}
//绑定事件回调中的箭头函数
class Toggle extends Component {
    render() {
        return (
             this.handleClick(e) }>
                {this.state.isToggleOn ? 'ON' : 'OFF'}
            
        )
    }
}

• 向事件函数传递其他参数并且使用到事件对象时，事件对象必须指定，并且要排在事件监听函数参数的最后：

class Popper extends Component {
    construtor(props) {
        super(props);
        this.state = {name: 'Michael Yan'}
    }

    popName(name, e) {
        e.preventDefault();
        console.log(name);
    }

    render() {
        // onClick也可以显式绑定：this.popName.bind(this, this.state.name)
        return(
            

                
Welcome:
                 this.popName(this.state.name, e)}
            

        )
    }
}

• 不使用事件对象时，两种方式都可以，例如：