34.React-初学

创建一个React项目
npx create-react-app my-app 需要node版本>14.x。
两种编程方式：
函数式编程

• 使用useState，更新useState解构出来的第二个参数（函数）来修改
• 使用数组方式，直接操作解构出来的数据更新后，页面没有更新，解决：将之前state的数据存一份，在重新赋值。

function XX(props){//通过props父子组件传参
    return (
)
}

组件式（Component）编程：

• 通过render函数渲染
• 继承自React.Component
• 可以为其注册组件生命周期事件（componentDidMount（组件已经被渲染到DOM中后运行），componentWillUnmount（组件销毁时））
• 通过this.setState更新state数据，在构造函数中定义state(this.state=xxx)

class XX extends Component{
    render(){
        return (
)
    }
}

react Hooks

• useState：不能传多个值，可以传一个对象，从state中将对象解构出来，但是setState时会把之前的值给重置掉，因此每次重新设置的时候需要解构赋值再和新的值做合并后回传。
• useEffect：检测到组件的变化，检测到具体的状态（待续）.组件更新完或者组件挂载完后执行的，【清除副作用】useEffect返回函数中进行操作。【监听某个值】，useEffect函数的第二个参数中传一个数组，数组项为想要监听的值。【组件更新完成之后执行，视图更新之后执行的，下一才会更新视图】
• useMemo简化计算性能，依赖属性改变之后执行【视图更新之前就执行了】,【里面还可以嵌套useMemo】，【返回值可以是个函数】
• useCallback
• useContext【跨层传递信息】通过provider传递【Provider】【Consumer】