React菜鸡入门感触

Posted 2021-04-25 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文档。有什么错误的就别大声说出来。

（可添加好友共同进步）

Coding 个人笔记