首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React菜鸡入门感触

React菜鸡入门感触

作者头像
wade
发布2020-07-13 11:09:25
4950
发布2020-07-13 11:09:25
举报
文章被收录于专栏:coding个人笔记coding个人笔记

这星期在上手react,之前一直觉得js写的还行,上手这个框架应该问题不大。结果就是感觉自己就像个弟弟一样,简单的东西都一遍又一遍的看。

新项目采用的是umi搭建的,第一次使用我也不敢多说话,只是提了一些逻辑上的建议,都是另外的在整理项目结构。

新的框架,从基础的业务开发入手,绑定class和点击事件还有变量,这几个都是最简单的:

className={styles.register}

className={styles['code-suffix']}

onClick={dis}

{countdown}

看一下循环渲染元素:

第一种方法:

let liList = arr.map((val) => {

return <li key={val.name}>{val.name}</li>

})

<ul>

{liList}

</ul>

第二种方法:

<ul>

{

arr.map((val) => {

return <li key={val.name}>{val.name}</li>

})

}

</ul>

很自由,顺便说一嘴,因为是直接return,在箭头函数简写还可以直接去掉return,之前看antd库的使用居然没看懂return去哪了。

条件判断:

{show ? <span>show</span> : <span>hidden</span>}

或者:

const note = show ? <span>show</span> : <span>hidden</span>

{note}

其实上面的语法本来不打算写出来,不过是自己记录一下之后开发可能要看一看。

说一下自己花时间比较多的吧,react分为类组件和函数式组件,在类组件中,想要实现页面的响应式,要把数据定义在constructor中声明的state,然后通过setState去改变数据才能响应式的渲染在页面上。所谓的生命周期也是类组件才有的。

而函数式组件是没有this指向的,所以想要数据响应式就要使用hook,以前一直不知道hook是什么,hook其实就是为函数式组件而生。最简单的两个hook就是state和effect,比如想要页面响应式数据:

const [count, setCount] = useState(0);

可以声明多个。

还有effect有点类似生命周期:

useEffect(() => { document.title = `You clicked ${count} times`;});

如果不写在hook里面,只要数据改变了,在外部的代码都会执行一遍,所以要放到方法或者effecthook里面,想只执行一次可以穿第二个参数空数组。再具体可以看看文档,毕竟我自己现在都说不明白。

还有就是this指向,在类组件中,有时候看见要在constructor里面赋值一个:

this.handleClick = this.handleClick.bind(this);

因为没有使用箭头函数,this指向不是指向实例,当然你也可以直接使用箭头函数:

handleClick = () => { console.log('this is:', this); }

或者直接在点击方法使用:

onClick={(e) => this.handleClick(e)}

还有一点很让我不习惯的是ts的使用,对props的使用上面一定要声明类型,不能直接解构:

interface Props {

location: Location,

history: History,

children: ReactChild

}

export default (props: Props) => {}

一定要声明props的类型,尽管这几个都是内置的对象,声明之后在函数里面进行解构使用。父组件传参到子组件也要这边声明一下类型。

还有一个状态管理model和组件直接的连接:

export default connect(({menu} : {menu: ModelType}) =>({menu}))(Login)

虽然是语法就这样,还是理解了半天。

父子组件通过传递函数数据实现通信,这点倒是跟vue差不多,但是react的组件都是函数,所以还能直接传递组件:

<TabPane tab={tab.name} key={index}>

{props.tabChild[index]()}

</TabPane>

TabChild就是组件:

import Send from './Send';

import Test from './Test';

const [tabChild, setTabChild] = useState([Send, Test])

以前一直不明白react高度自由,现在算是明白了一点点,要是没有声明规范,代码真的是想怎么写就怎么写,还有对于hook,也算是认识了一下。

以上只是自己的感受,毕竟我这react菜鸡还什么都不懂,写个页面还得对着api文档。有什么错误的就别大声说出来。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2020-07-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 coding个人笔记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档