React事件、函数式声明组件、有状态组件

事件

  • react的事件到底常不常用我也不清楚,因为js里是能不用行内事件就坚决不用行内事件,但是既然html里有事件这一属性,那么react实现其功能也是无可厚非的。

事件触发调用函数

  • 利用好插值符号,因为插值符号里就是给你写js的地方;
<script type="text/babel">
    function alertThis() {
        alert("Clicked once");
    }
    //事件属性是用驼峰命名规则,记着就不用翻api了
    const element = (
        <div>
            <input type="button" defaultValue="测试" onClick={alertThis}/>
        </div>
    );
    ReactDOM.render(
        element,
        document.getElementById('app')
    );
</script>

React给事件函数传递参数

  • 通过bind:
<script type="text/babel">
    function alertThis(pa) {
        alert("Clicked once and get parms:"+pa);
    }
    const element = (
        <div>
            <input type="button" defaultValue="测试" onClick={alertThis.bind(this,"参数")}/>
        </div>
    );
    ReactDOM.render(
        element,
        document.getElementById('app')
    );
</script>
  • 通过函数调用函数:

因为插值符号里可以执行js代码,而不仅限于调用函数,所以,实际应用中react的渲染带动的事件和相关代码可以非常强大。

<script type="text/babel">
    function alertThis(pa,event) {
        alert("Clicked once and get parms:"+pa+"事件:"+ event.type);
    }
    const element = (
        <div>
            <input type="button" defaultValue="测试" onClick={function(e) {
                alertThis("参数",e)                   
            }}/>
        </div>
    );
    ReactDOM.render(
        element,
        document.getElementById('app')
    );
</script>

React组件

  • 声明式组件:

es5函数声明


function Welcome(props) {
   return <h1>Hello, {props.name}</h1>;
}

es6函数声明

class Welcome extends React.Component {
	constructor(){
		super();//如果使用了构造函数,一定要显示的调用父级的构造函数,不然会报错。	
	}
    render() {
        return <h1>Hello, {this.props.name}</h1>;
    }
}
  • 使用组件:
const element = <Welcome name="Sara" />;
ReactDOM.render(
    element,
    document.getElementById('app')
);

在这里插入图片描述

组件最大的特点,高复用性!,你可以重复使用组件,非常的爽,非常的方便!

有状态的组件

  • state,用数据驱动视图,后台发送的数据都是用状态保存,为的就是有状态渲染。
<script type="text/babel">
    class Welcome extends React.Component {
        constructor(){
            super();//如果使用了构造函数,一定要显示的调用父级的构造函数,不然会报错。

            this.state ={
                name:"Bob"
            }
            setTimeout(() => {
                this.setState({
                    name:"Lucy"
                })
            }, 3000);
        }
        render() {
            return <h1>Hello, {this.state.name}</h1>;
        }
    }
    const element = <Welcome name="Sara" />;
    ReactDOM.render(
        element,
        document.getElementById('app')
    );
    //我这里设置了一个定时器检测状态的改变
    setInterval(() => {
		console.log(document.getElementById('app').firstChild.innerHTML)
    }, 1000)
</script>

在这里插入图片描述

在这里插入图片描述

发布了53 篇原创文章 · 获赞 59 · 访问量 9万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览