2021-10-27

react概念总结

函数式组件（又可称无状态组件）	这种组件没有生命周期，没有自己的私有state数据，因此这种组件一般的数据来源于父组件prop传值，所以它仅负责展示页面内容。
特点：	1.函数式组件名首字母必须大写，否则React会将其当做一个标签 。 2. props 参数 ，用来接收父组件传过来的值 。 3. 函数中必须return 组件模板
类组件（又可称为有状态组件）	ES6 的 class 创建类组件，它有自己的私有 state 数据 ，有自己的生命周期

//函数式组件
function MyCom(props){
   return (
      <div class="mycom">
         <h3>我是函数式组件mycom</h3>
         <p>{props.title}-{props.name}</p>
      </div>
   )
}

//类组件
class ClannComponent extends React.Component {
   constructor(props){
      super();//注意:实现constructor() 构造函数,必须实现super()函数.除非将constructor()构造函数删除
      // 参数props是接收父组件传递过来的值，props是一个对象，包含传入的属性键值对                                                          
   }
   render(){
      console.log("类组件被加载了");
      return (
         <div class="ccom">
            <h3>我是类组件</h3>
         </div>
      )
   }
}

• react 采用的是jsx的语法
  Babel 会把JSX转译成一个名为React.createElement()函数调用，ReactDOM.render 是往根节点中插入模板，jsx碰到 <> 解析模板 碰到{ } 解析 js 。jsx 插值写法： 在标签内插值，字符串，模板片段，数组

什么是JSX ?
JSX 是一个看起来很像xml 的JavaScript语法扩展。
优点：① jsx执行更快，因为它在编译为JavaScript 代码后进行了优化。
② 它是类型安全的，在编译过程中就能发现错误
③ 使用JSX编写模板更加简单快速 jsx就是用来声明React当中的元素

• react事件中，若遇到this丢失的问题如何解决：
  **小仙女非仙女*的解决方式：在你声明的时候别忘了使用箭头函数哦~ > O <

• 在构造函数中使用this.state 声明私有数据，是以当前组件的私有数据都保存在这个对象当中

• 如何实现修改state数据 ？
  注意：不能直接修改state数据，因为页面是无法渲染的，以是 需要使用setState() 方法 用来更新数据。
  setState() 不会每次调用都渲染页面，而是会将多个setState() 合并更新，这样页面渲染效率会更高。
  setState() 可能是异步更新数据，调用该方法之后，可能不会立即拿到最新数据，若需要可以改变setState()写法 ，this.state.name = “Mili” 是可以保证拿到最新的数据。setState() 的第二个参数是在name更新完毕之后，react会回调该函数，把要更新的数据更新过来

  this.setState({
         name:"李四",
         isman:true
      },
      ()=>{
         console.log(this.state.name);
      }
      )
      console.log(this.state.name);
      //注意：在这里直接获取的name值是旧数据，
      //因为setState()可能是异步，
      //如若想要获取最新数据，需要用到定时器