版权声明:本文为博主原创文章,未经博主允许不得转载。 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
的方法可以看我这篇文章。
这都是在项目中遇到的,所以一点一点总结和积累一下,如果有理解不正确的地方请友情提示一下在留言区。