react中函数的定义和使用

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/well2049/article/details/79430811

在react项目中会使用函数是最基本的,如果是在普通的js文档中用特别简单,但是在react中,函数定义的方式,方法和位置都会决定使用方式的不同。
React项目中定义组件的方式有两种:
第一种就是函数式:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
// 或者
const hello = () => (
    <div>
        <h2>Draft</h2>
    </div>
);

第二种就是用到最多的通过class类来声明定义一个组件:

// 组件外定义的2个函数
function see(){}; //函数see()
const see2=()=>{}; // see2()

class Welcome extends React.Component {
// 组件内定义的函数

  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

定义了组件以后,我们的函数就是要在组件内执行的,定义函数的方式也是有两种:
第一种就是通过function(){} 来定义。
第二种就是通过箭头方式来定义函数= () =>{}

注意如果是在组件外定义的箭头函数,必须要用const
或者let来装饰一下,不然就会报错或者执行不了,我多次尝试后发现的,不知为何,如果您知道,望友情提示一下。组件内定义函数就不必用const

在组件外定义的函数,在组件内使用时this.see
如果是在组件内部定义的,render() 方法之前定义的,在组件内使用直接onClick={see} 即可。

如果是要加载异步数据或者服务器数据的函数,必须要放到

componentDidMount() {
        this.getJsonData();
    }

在这里也可以看出如果在在render() 方法之前使用也是需要加this 之后的return() 就不需要加this 了。有关函数绑定this 的方法可以看我这篇文章

这都是在项目中遇到的,所以一点一点总结和积累一下,如果有理解不正确的地方请友情提示一下在留言区。

猜你喜欢

转载自blog.csdn.net/well2049/article/details/79430811