react的使用详解

  • Z时代
  • 2024-01-10
  • 分类：综合

react

ReactDOM.render((<div></div>),document.getElementById('root')),这里是渲染一个div组件到root这个容器上面。

    (<div></div>)这里面使用圆括号为了换行方便

组件编写：

        1.组件名字首字母大写，这样的目的是渲染的时候证明是组件而不是html的标签

        2.所有的组件集成Component,这样的好处是可以实现组件参数和状态初始化还有生命周期

        3.组件必须有构造方法,注意传递的参数为...args,有的人会说是props,但是...args这样的好处是方便

        某个组件应用其他组件的时候参数传递用起来方便

        4.组件必须有render方法

        5.jsx必须有个容器包裹

模板输出：

        1.{}代表输出，这里注意属性和方法需要this.xx输出,对于“”输出的是字符串。

        2.return在js中换行会出问题，建议return(),括号里面的内容则可以进行换行

组件传参：

        1.注意传参的时候是“”还是{},接收的时候使用prop进行接收

        2.对于行间样式style必须是json，<div style={{color:red} }/>,这里有的人会疑问这里为什么是两个{},

        这里简单说下,{color:red}可以写成一个变量,let textColor = {color:red},<div style={textColor }/>.

对于key的问题：跟踪虚拟dom的变化，比如{12，12,6,8}=》{12,6,9}根本不知道数据

怎么变化的，所以增加key进行数据跟踪，对于for循环不允许使用index，因为index可能因为add或者delete导致

数据变化了然后会导致故障

    如果成组的加入的时候,

        1.1. key不能重复

        1.2. 可以不能修改

        1.3. 必须有key

普通组件的引入：

       

数组类型：

数据遍历：

以上是 react的使用详解 的全部内容， 来源链接： utcz.com/z/381607.html

回到顶部