react中类方法this指向问题

react中的组件分为函数式组件和类组件

一、函数式组件

<script type="text/babel">
//1.创建函数式组件
function Demo(){
  return <h2>我是用函数定义的组件</h2>

}
//2.渲染组件到页面
ReactDOM.render<Demo/>,document.getElementById('test'))
</script>

注意:

组件的首字母必须大写,参考jsx的语法规则,如果是小写则会转化为对应的html标签从而报错

此中的this时undefined,因为在babel翻译下会开启严格模式

二、类式组件

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

注意:1.类式组件必须继承React.Component

           2.必须写render(){}

           3.render必须有返回值

类中方法this的指向

changeWeather类中默认开了严格模式,所以直接调用时this不敢指向window只能是undfined
由于constructor和render里是通过实例调用的所以没有问题,但是changeWeather里属于直接调用

正确方法是用bind复制changeWeather函数,并把复制的函数放在原型上,这样在调用复制后的changeweather函数,里的this就指向的是实例对象(bind的作用是复制一个函数,返回的是一个函数)即调用demo函数