React.js 慕课网基础教程笔记摘录

这是原始资料：React 教程_入门视频

这里是上面内容的摘录：

慕课网的react内容摘记

基础样式

class Hello extends React.Component{
    render(){
        return (
            <div>Hello World</div>
        );
    }
}

ReactDOM.render(<Hello />,document.getElementById("root"));

<div class='root'></div>

class设置

class Hello extends React.Component{
    render(){
        return (
            <div className='className'>Hello World</div><br>
        );
    }
}

ReactDOM.render(<Hello />,document.getElementById("root"));

• class在React中是关键字，所以使用className进行代替
• 这里的重点在于让你知道设置class不是直接写class=''这样的形式的，而是className=''这样的形式
• 或者你也可以直接在外部传递className的值：

class Hello extends React.Component{
    render(){
        return (
            <div className={this.props.className}>Hello World</div><br>
        );
    }
}

ReactDOM.render(
    <Hello className='the_real_class_name'/>,
    document.getElementById("root")
);

style设置

使用css结合class进行样式设计

就是在外部设置css样式，然后通过class定位到对应的渲染结果上去。

内联样式：style

class Hello extends React.Component{
    render(){
        return (
            <div style={{color:'red',fontSize:'24px'}}>Hello World</div>
        );
    }
}

ReactDOM.render(<Hello />,document.getElementById("root"));

跟class类似，style也同样不能直接设置对应属性，而是需要设置一个成一个对象，或许下面的形式你可能更好理解：

class Hello extends React.Component{
    render(){
        const styleName={
            color:'red',
            fontSize:'24px'
        };
        return (
            <div style={styleName}>Hello World</div>
        );
    }
}

ReactDOM.render(<Hello />,document.getElementById("root"));

生命周期

1. mount
2. update
3. unmount

其中各个部分中包含的函数有：

• componentWillMount
• componentDidMount

---

• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• componentDidUpdate

---

• componentWillUnmount

事件绑定

class Hello extends React.Component{
    handleClick(){
        alert("按钮被点击");
    }
    render(){
        return (
            <button onClick={this.handleClick}>Hello World</button>
        );
    }
}

ReactDOM.render(<Hello />,document.getElementById("root"));

或者你也可以传递进event参数，该参数可以像javascript的原生event一样操作，如下面这个例子：

class Hello extends React.Component{
    handleClick(event){
        alert("被点击按钮的name是："+event.target.name);
    }
    render(){
        return (
      <div>
        <button name='我是name属性1' onClick={this.handleClick}>Hello World</button>
        <button name='我是name属性2' onClick={this.handleClick}>Hello World Again</button>
      </div>            
        );
    }
}

ReactDOM.render(<Hello />,document.getElementById("root"));

event是作为默认参数传递进处理事件的，不需要在外部显式调用！

这里穿插一个知识点，那就是如何获取DOM节点本身，这里我们都是在操作渲染的模板，但是我们没有直接操作渲染完成后的DOM对象，这里讲一下：

class Hello extends React.Component{
    handleClick(event){
        var Real_DOM=React.findDOMNode(this.refs.anyName);
        if(Real_DOM.style.display==='none'){
            Real_DOM.style.display='inline';
        }else{
            Real_DOM.style.display='none';
        }
        alert("被点击按钮的name是："+event.target.name);
    }
    render(){
        return (
      <div>
        <button name='我是name属性1' onClick={this.handleClick}>Hello World</button>
        <span ref='anyName'>显示|隐藏</span>
        <button name='我是name属性2' onClick={this.handleClick}>Hello World Again</button>
      </div>            
        );
    }
}

ReactDOM.render(<Hello />,document.getElementById("root"));

不知道为什么，代码语法没有报错，但是功能没有实现？？？