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"));

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