React入门宝典：从组件到Hooks再到完整项目

React入门宝典：从组件到Hooks再到完整项目

React是目前前端开发中使用最广泛的框架。它的学习曲线比Vue陡峭一些，但掌握了React之后再学其他框架会轻松很多。因为React的核心思想组件化编程是所有现代框架的共同基础。

组件是React的核心

React应用由一个个组件组成。一个组件就是一个可复用的UI片段。每个组件只负责页面中的一小块区域，多个组件组合在一起就构成了完整的页面。

组件化开发的好处是可复用性和可维护性。写一个按钮组件后可以在所有页面中使用同一个按钮组件而且要修改样式只需要改一个地方。不用在每个页面里重复写同样的HTML和CSS。

React组件本质上是一个JavaScript函数，接收props参数返回JSX。JSX是写在JavaScript中的HTML。写JSX的时候注意class要写成className，for要写成htmlFor，style要写成JavaScript对象而不是CSS字符串。这几个是新手最容易犯的错误。

状态管理和Hooks函数

useState是React中最常用的钩子函数。返回一个状态变量和一个更新函数。listStatus是一个变量用来存储计数器的当前值，setListStatus是更新这个变量的函数。点击按钮时调用setListStatus加一React会自动更新页面显示新值。

useEffect用来处理副作用。什么叫副作用。数据请求、订阅事件、手动操作DOM都是副作用。useEffect接受两个参数，第一个是回调函数，第二个是依赖数组。依赖数组为空时回调只在组件挂载时执行一次，依赖数组中有变量时回调在变量变化时执行。

useRef用于获取DOM元素的引用或者保存组件整个生命周期内不变的值。和useState不同，更新useRef的值不会触发重新渲染。

组件通信的方式

父子组件通信是最常见的情况。父组件通过props给子组件传递数据和回调函数。子组件通过回调函数向父组件传递信息。

跨级组件通信可以使用Context。用createContext创建上下文，在顶层组件用Provider提供数据，子组件用useContext消费数据。Context适合共享全局数据，比如用户登录状态和主题配置。

写在最后

React的学习建议是从小项目开始。不要一开始就看源码和架构设计。先用createReactApp搭建一个简单项目，写几个基础组件，用useState管理状态。做出一个小型应用之后再逐步学习路由和状态管理。