React 入门

fatcoder
158 阅读8分钟

React-学习路线

  • 要想学习 hook ,一定要把基于 class 的组件形式，掌握完全。

1.JSX

  • {} 内可以放置任何有效的JS代码
  • 可以返回 JSX 表达式
  • React 组件要求必须在组件的最外层进行包裹 有时候最外层不能有包裹元素，这个时候可以使用 Fragement标签

2.组件 & Props

  • React.creatClass 方法用于生成一个组件类。
  • 函数式组件 class 组件。
  • React 元素可以是用户自定义的组件.
  • 自定义组件必须以大写字母开头。
  • 组件的任意入参都可以叫做 props.
  • 组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。
  • PropTypes 用来规定组件实力的属性是否符合要求，定义props 类型
  • this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。

3.state & 生命周期

理解state: 将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而导致重新渲染 UI。

  • componentDidMount() 方法会在 组件已经在渲染到dom中后运行
  • setState 修改 state.
  • state 的更新可能是异步的。
  • setState方法是从 Component 中继承过来的。
  • setState是异步更新。 解释： 如果每次调用 setState 都进行一次更新, 那么意味着 render 函数会被频繁的调用界面重新渲染, 这样的效率是很低的 最好的方法是获取到多个更新, 之后进行批量更新。

4.事件处理

  • React 事件的命名采用小驼峰式。
  • 使用 JSX 时需要传入一个函数作为事件处理函数，而不是字符串

5.条件渲染

  • &&
  • 三目运算符
  • 阻止渲染 render 方法返回 null

6.列表渲染

this.props.children 表示组件的所有子节点。 JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员

获取真实的DOM节点 ref

有时需要从组件获取真实DOM 节点，用到ref 属性

组件生命周期

  • Mounting: 已插入真实DOM
  • Updation: 正在被重新渲染
  • Unmounting: 已移出真实 DOM 每种状态都提供了两种处理函数，will函数在进入状态之前调用，did函数在进入状态之后调用，
  • componentWillMount()
  • componentDidMount()
  • componentWillUpdate()
  • componentDidMount()
  • componentWillUnmount()

Mounting 阶段

  1. componentWillMount: 在组件即将被加载到页面的时候执行。
  2. render: 页面state 或 props 发生变化时执行。
  3. componentDidMount: 组件挂载完成时执行。

Updation阶段 一个是 props 属性改变，一个是state状态改变。

  1. componentWillUpdate, 页面即将更新时执行。
  2. render 执行
  3. componentDidUpdate,页面更新后执行。

这个阶段还有两个特殊的 生命周期 函数。

  • componentWillReceiveProps。 子组件接收了 props,这个函数就可以被执行。

Unmounting阶段 组件从页面中删除的时候执行，

还有两种特殊状态的处理函数

  • componentWillReceiveProps(): 已加载组件接收到新的参数时调用。
  • shouldComponentUpdate(): 组件判断时候重新渲染时调用。

Ajax

可以在生命周期 componentDidMount() 方法中设置Ajax,等到请求成功，在使用 this.setState 方法重新渲染UI。

Hook

  • Hook 不能在class组件中使用。 暂时理解为：特殊的react函数
  • State Hook： useState 会返回两个值，当前state 和 一个能更新它的函数。
  • Effect Hook: useEffect 给函数组件增加了操作副作用的能力，它跟 class 组件中的 componentDidMount、componentDidUpdate、componentWillUnmount 具有相同的用途，只不过是被合并成了一个 API。
  • Context Hook : useContext() 共享状态钩子。
  • Reducer Hook useReducer
  • 钩子一律使用use前缀命名，便于识别。你要使用 xxx 功能，钩子就命名为 usexxx。

useEffect 理解

Hook 的作用，解决函数组件的副效应（side effect），用来为函数组件引入副效应。函数组件的主体只应该用来返回组件的 html 代码，其他的所有操作，都必须通过钩子引入。

如果useEffect第一个函数参数直接或者间接用上某个变量，就请把这个变量放在useEffect的第二个参数里。

setState的同步和异步

1.为什么使用setState

  • React 并没有实现类似于 Vue2 中的 Object.defineProperty 或者 Vue3 中的Proxy的方式来监听数据的变化
  • 我们必须通过 setState 来告知 React 数据已经发生了变化

useEffect(): 副作用钩子

useEffect(() => {
    effect // 副作用
    return () => {
      cleanup // 解绑，作用类似与 componentWillUnmount,做一些clean up 的功能。
    }
  }, [input])  // 依赖，如果没有这个参数，只在

effect 在每次渲染的时候都会执行。

effect hook 不仅在组件挂载时执行，也在组件更新时执行。

可以给useEffect 第二个参数，可以提供一个空数组，仅在挂载的时候执行。

useEffect 第二个参数，如果变化的话，useEffect hook runs again.如果第二个参数是空数组的话， hook 不会在updating时执行，因为他没有监听任何的变量。

有时候，我们不希望useEffect()每次渲染都执行，这时可以使用它的第二个参数，使用一个数组指定副效应函数的依赖项，只有依赖项发生变化，才会重新渲染。

  • React首次渲染和之后的每次渲染都会调用一遍useEffect函数，而之前我们要用两个生命周期函数分别表示首次渲染(componentDidMonut)和更新导致的重新渲染(componentDidUpdate)。
  • useEffect中定义的函数的执行不会阻碍浏览器更新视图，也就是说这些函数时异步执行的，而componentDidMonut和componentDidUpdate中的代码都是同步执行的。

useEffect 常见用途

  • 获取数据（data fetching）
  • 事件监听或订阅（setting up a subscription）
  • 改变 DOM（changing the DOM）
  • 输出日志（logging）

Context

Context 可以让我们无须明确地传遍每一个组件，就能将值深入传递进组件树。

  • 避免层层传递一些props。 可以将一些 组件自身 传递下去

React 组件通信方式

  • 父组件向子组件通信 props
  • 子组件向父组件通信 只要在组件调用时，把方法传递给子组件就行了，记得在这里也要进行 this 的绑定。
  • 跨级组件之间通信
  • 非嵌套组件之间通信

通过 props 传递的属性都是只读的，只能使用这个值，而不能修改这个值。

react-transition-group

官方提供的动画过渡库。 有时间学习一下 api.

注释写法

React 注释写法

 {/* 在这里写某些注释。注释要写在大括号内。*/}
  • jsx 里面的类名，class 要写成 className.

Redux

简述 redux flow

Redux 的核心概念是，组件发出 action 与状态管理器通信。状态管理器收到 action 以后，使用 Reducer 函数算出新的状态,Reducer 函数的形式是

(state, action) => newState

用户 dispatch action eg: onClick,然后 store 会自动调用 Reducer, 并且传入两个参数，当前 state, 和收到的action. reducer 会返回新的 state,state 一旦有变化, state 就会调用监听函数. 监听函数得到当前状态。

  1. action creators eg: onClick
  2. store 自动调用 Reducer, 并返回当前新的 state
  3. state 一旦有变化，store 就可以调用监听函数，得到最新的状态。
  4. 组件重新设置 setState, view 重新渲染。

单独使用redux的问题是， redux 挂载在哪里，window?,怎样引入全局？

React-Redux 的使用，

  • Provider 是一个提供器，这个组件里面的所有子组件都可以使用 store.
  • 在各个子组件中要使用 connect 连接器，使用connect 制作一个映射关系.

总结： react-redux 简化了redux 在react 项目中的操作。使用全局的 Provider 组件，在子组件内自定义, mapStateToProps, 和 mapDispatchToProps, 然后使用connect 链接起来。在reducer 内更改，可以达到 无状态组件的地步。

Redux-chunk 插件

比如在Dispatch一个Action之后，到达reducer之前，进行一些额外的操作，就需要用到middleware（中间件）。在实际工作中你可以使用中间件来进行日志记录、创建崩溃报告，调用异步接口或者路由。

这个中间件可以使用是Redux-thunk来进行增强(当然你也可以使用其它的)，它就是对Redux中dispatch的加强，

这里的中间件指的是 Redux 的中间件，而不是React 的中间件。

这里还有常用插件，React-Redux，可以简化Redux 流程。

React-Router

  • exact 精准匹配，只有全部匹配，才会进入页面，匹配一部分是不能跳转的。
  • 组件内使用 this.props.match 获取路由对象。
  • redirect 标签式重定向，编程式重定向。
  • 嵌套路由。

router 的重点。

   <Link to='/'/>
   
   <Route path='/' component={page}>

scss 的使用，

create-react-app 中已经添加了 sass-loader 的支持，安装依赖 node-sass 后，直接使用即可。

npm install node-sass --save

怎样封装一个组件，

  • 1，组件需求分析，接收哪些参数，返回哪些内容。需要提前规划好，用用字或图表，几率下来。
  • 2.组件都是一步一步完善的，一点点完善的，先从最基础的地方做起。

React HOC 高阶组件

高阶组件是React 中一个很重要且较复杂的概念，主要用来实现组 件逻辑的抽象和复用

const EnhancedComponent = higherOrderComponent(WrappedComponent);

高阶组件的使用场景主要有以下4种：

  • 操纵props
  • 通过ref访问组件实例
  • 组件状态提升
  • 用其他元素包装组件

React 优化组件性能

  • 组件懒加载(React.lazy(...)和)
  • Pure Component
  • shouldComponentUpdate(...){...}生命周期函数
  • React.memo

学习链接

avatar
文章
阅读
粉丝