React菜鸡入门感触

Posted coding个人笔记

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React菜鸡入门感触相关的知识,希望对你有一定的参考价值。

这星期在上手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文档。有什么错误的就别大声说出来。




(可添加好友共同进步)


Coding 个人笔记


以上是关于React菜鸡入门感触的主要内容,如果未能解决你的问题,请参考以下文章

PWN菜鸡入门之栈溢出

PWN 菜鸡入门之 shellcode编写 及exploid-db用法示例

PWN菜鸡入门之函数调用栈与栈溢出的联系

PWN菜鸡入门之栈溢出 —— ret2libc与动态链接库的关系

C#多线程(入门篇)

莫比乌斯反演入门解析