React组件

使用函数创建组件：

函数组件：使用JS函数（箭头函数）创建的组件。

约定1：函数名称必须以大写字母开头。

约定2：函数组件必须有返回值，表示该组件的结构。

例：function Hello {

        return(

                <div>这是我第一个函数组件</div>

        }

}

渲染函数组件的方法：

React DOM.render(<Hello/>,document.getElementById('root'));

使用类创建组件：

类组件：使用es6的class创建组件。

约定1：类的名称也必须大写。

约定2：类组件应该继承React.Component父类，从而可以使用父类重负提供的方法和属性。

约定3：类组件必须提供render()方法。

约定4：render方法必须提供返回值，表示该组件的结构与。

class Hello extends React.Component{

        render(){

                return <div>Hello Class Component</div>

        }

}

将组件抽离为独立的js文件：

1.创建一个hello.js文件。

2.在hello.js文件导入React。

3.创建组件。

4.在Hello.js中导出该组件。

5.在index.js文件中导入Hello组件。

事件绑定：语法：on+Click={......} 比如onClick={}

class App extends React.Component{

        handleClick(){

                console.log('单击事件触发')

        }

        render(){

                 <button onClick={this.handleClick}>点击</button>

        }

}

函数组件事件绑定：

function App(){

        function handleClick(){

                console.log('单击事件触发了’）

        }

        return (

                <button onClick={handleClick}>点我</button>

        }

}

事件对象：可能通过事件处理程序的参数获取到事件对象

React中事件对象叫做：合成事件。 合成事件：兼容所有浏览器，无需但跨浏览器的兼容问题。

handleClick(e){

        e.preventDefault()

        console.log('阻止跳转')

}

组件中的state和setState:

class hello extends React.Component{

        constructor(){

                super()

                this.state={

                        count:0

                }

       }

        render(){

                return (

                        <div>有状态的组件</div>

                }

        }

}

将事件处理函数抽离出来，this的指向问题：

解决方法1：箭头函数无this

 <button onClick={()=>{

        this.setState({

                count:this.state.count+1

        })

}>+1</button>

解决方法2：绑定this

constructor(){

        super();        

        this.onIncrement = this.onIncrement.bind(this)

}

解决方法3：

class Count extends React.Component{

        onIncreament=()=>{

                this.setState({..})

        }

}