React 学习笔记

React 学习笔记

一、组件的基础结构

class Clock extends React.Component { constructor(props){ super(props) this.state= { clock: "" } } // 组件 mount 时 componentDidMount(){ } // 组件 unmount 时 componentWillUnmount(){ } updateClock(newClockString){ // 更新 state 内容，使用 this.setState() this.setState({ clock: newClockString }) } render() { return (

二、数据方向

react 的数据传递方向是由上向下流的

三、事件处理

​​component​​​ 中使用方法，需要在 ​​constructor​​​ 中绑定一下 ​​this​​

你必须谨慎对待 JSX 回调函数中的 this，在 JavaScript 中，class 的方法默认不会绑定 this。 如果你忘记绑定 ​​​this.handleClick​​​ 并把它传入了 ​​onClick​​​，当你调用这个函数的时候 this 的值为 ​​undefined​​。

constructor(props){ // 为了在回调中使用 `this`，这个绑定是必不可少的 this.updateClock= this.updateClock.bind(this); }, updateClock(newClockString){ // 更新 state 内容，使用 this.setState() this.setState({ clock: newClockString }) }, render() { return (

HOOK: useEffect

​​useEffect​​​ 作用是 在 ​​function component​​ 中，当数据变化时，执行这个方法。

useEffect(()=>{ // 初始化 List 数据 // do something})

还可以在后面添加参数过滤，只有这些参数变化时，还会触发 ​​useEffect​​​ 方法被执行，如下，只有 ​​projList​​​ 变化时，这个 ​​useEffect​​ 方法才会被执行

useEffect(()=>{ // 初始化 List 数据 // do something}, [projList])

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。