乐趣区

关于vue.js:手把手教你学react初学者

jiezi
  1. 搭建 react 环境，首先装置 creat-react-app 脚手架。
  2. 用 creat-react-app 我的项目名。创立一个 react 我的项目.
  3. npm i 初始化我的项目
  4. npm start 启动我的项目

2. 搞清楚 react 状态治理 state

React 是一个状态机，体现是什么中央呢，就是体现在 state 上，通过与用户的交互，实现不同的状态，而后去渲染 UI, 这样就让用户的数据和界面保持一致了。state 是组件的公有属性。

state 只能在本组件中去初始化，并且 state 只能被本组件去批改和仿问，不能被内部仿问和批改，所以也能够说，state 是组件公有的

  1. state 状态初始化。在结构器外面初始化。
constructor(props) {super(props);
   this.state={
      key:value,
      ...
   }
}

2. 更新 state

留神：setState()是异步的，也就是你调用了 setState()之后，React 就开始筹备去更新了，两头计算会可能会有肯定的延时

 this.setState({key:value}) ;

3、调用 diff 算法
setState() 会触发 diff 算法最终确定是否要更新。
每跟新 state 外面的数据，render 就会从新执行。~~~~

能够让 setState() 接管一个函数而不是一个对象。这个函数用上一个 state 作为第一个参数，将此次更新被利用时的 props 做为第二个参数：~~~~

// Correct
this.setState((state, props) => ({counter: state.counter + props.increment}));

  1. react 次要是单项数据流，做页面渲染。

    • 染数据渲染中常常会遇到数据更新，在 react 中并没有相似 Vue 的监听 (watch，compute)，常常做这类数据的时候须要在钩子函数 应用 [props] 数组相似于应用 componentDidUpdate 外面实现。
    • 当然当初也有很多包相似 watch-props. 倡议还是不要这样写。
    • 这样就将业务逻辑与 react 生命周期绑定在一起了。不便于管理。Hooks 的推出，解决了这样的问题。

5.react-Hooks

退出移动版