React组件

React组件

一、函数式组件

①无状态的函数式组件

    <div id="app"></div>
    <script src="node_modules/@babel/standalone/babel.js"></script>
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
    <script type="text/babel">
        //组件的名字首字母大写
        // 这种函数式组件也是无状态的 
        function AppHeader() {
            return (
                <div className="header">
                    <h2>头部部分</h2>
                </div>
            )
        }
        function AppContent() {
            return (
                <div className="content">
                    <h3>中间内容部分</h3>
                </div>
            )
        }
        function AppFooter() {
            return (
                <div className="footer">
                    <h2>尾部部分</h2>
                </div>
            )
        }
        const element = (
            <div>
                <AppHeader />
                <AppContent />
                <AppFooter />
            </div>
        )
        ReactDOM.render(element,document.getElementById('app'))

React组件

②有参数的函数式组件

    <div id="app"></div>
    <script src="node_modules/@babel/standalone/babel.js"></script>
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
    <script type="text/babel">
        //组件的名字首字母大写
        // 这种函数式组件也是无状态的 
        function Welcome(props) {
            return <h2>hello {props.name}</h2>
        }
        
        const element = (
            <div>
                <Welcome name='eric' />
                <Welcome name='jack' />
                <Welcome name='lisa' />
            </div>
        )
        ReactDOM.render(element,document.getElementById('app'))
    </script>

React组件

二、类方式组件

①基本的类方式组件

    <div id="app"></div>
    <script src="node_modules/@babel/standalone/babel.js"></script>
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
    <script type="text/babel">
        //class组件类，必须继承自React.Component才是一个组件类，否则就是一个普通的类
        // class组件类，必须通过render函数返回组件模板
        class MyComponent extends React.Component{
            render(){
                return(
                    <div>
                        <h2>Component</h2>
                    </div>
                )
            }
        }
        
        const element = (
            <div>
                <MyComponent />
                <MyComponent></MyComponent>
            </div>
        )
        ReactDOM.render(element,document.getElementById('app'))
    </script>

React组件

②有状态的类方式组件

    <div id="app"></div>
    <script src="node_modules/@babel/standalone/babel.js"></script>
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
    <script type="text/babel">
        //如果子类加入了构造函数 constructor，则一定要手动调用父类的构造函数super()
        // React 组件需要通过手动为组件添加state成员来初始化：ViewModel
        // state等价于Vue中的data,接下来就可以在该组件管理的模板中通过{}来访问绑定数据
        // handleClick方法里面的this默认是window，而不是实例对象，需要通过方法改变这个this的指向
        // 需要修改state里的数据并且希望视图更新，则一定要使用this.setState方法
        class MyComponent extends React.Component{
            constructor(props) {
                super(props);
                this.state = {
                    message:'hello world'
                }
            }
            render(){
                return(
                    <div>
                        <h2>{this.state.message}</h2>
                        <h2>{this.state.message}</h2>
                        <h2>{this.state.message}</h2>
                        <button onClick={this.handleClick.bind(this)}>点击改变message</button>
                    </div>
                )
            }
            handleClick(){
                this.setState({
                    message:'good job'
                })
            }
        }
        
        const element = (
            <div>
                <MyComponent />
            </div>
        )
        ReactDOM.render(element,document.getElementById('app'))
    </script>

React组件

三、事件绑定的this指向问题

①第一种绑定方式，this指向的是window，默认接收一个参数event(事件源对象)，不接收额外的参数

②第二种绑定方式，使用bind，默认接收一个参数参数event(事件源对象)，支持接收额外的参数，手动传递的参数会放到函数的最前面，event会作为函数的最后一个参数

③第三种绑定方式，使用箭头函数，自动bind（this），支持接收额外的参数，手动传递的参数会放到函数的最前面，event会作为函数的最后一个参数

   <div id="app"></div>
    <script src="node_modules/@babel/standalone/babel.js"></script>
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
    <script type="text/babel">
        class MyComponent extends React.Component{
            constructor(props) {
                super(props);
                this.state = {
                    message:'hello world'
                }
            }
            render(){
                return(
                    <div>
                        <h2>{this.state.message}</h2>
                        <h2>{this.state.message}</h2>
                        <h2>{this.state.message}</h2>
                        <button onClick={()=>{this.handleClick()}}>点击改变message</button>
                    </div>
                )
            }
            handleClick(){
                this.setState({
                    message:'good job'
                })
            }
        }
        
        const element = (
            <div>
                <MyComponent />
            </div>
        )
        ReactDOM.render(element,document.getElementById('app'))
    </script>

④补充：bind的用法

    <script>
        function fn(a,b,c,d,e,f){
            console.log(a,b,c);
            console.log(d,e,f);
        }
        // 绑定的同时传递参数，预传参，不调用
        var newFn = fn.bind(this,1,2,3)
        // 调用的时候传递参数，该参数会和预传递的参数合并到一起作为函数参数
        newFn() //1 2 3 undefined undefined undefined
        newFn(4,5,6) // 1 2 3  4 5 6
    </script>

一、函数式组件

二、类方式组件

三、事件绑定的this指向问题

相关推荐