首页 > 其他 > 详细

React

时间:2019-08-28 22:24:59      阅读:83      评论:0      收藏:0      [点我收藏+]

  React 是由 Facebook 发明及维护,当前最流行的框架,生态链完善

  使用 script 来引入 有关 React 的 js 文件

   主要进入的文件是 react.development.js    // react 的文件依赖

            react-dom.development.js  // react 的 dom 操作依赖

            babel.min.js   // react 采用了 jsx 的写法,所以要依赖此文件   

  如果觉得在 React 的官网上不好找 js 文件的话,我们可以通过  https://www.bootcdn.cn/ 来进行查找,并且可以通过网址搜索 js 的内容,将其拷贝走;

  案例:

    技术分享图片

  当我们成功的将 React 的 js 文件引入进入后,我们就可以开发 React 的项目了

  第一步,一个简单的 demo ,体验简单的 React 的渲染页面

    技术分享图片

  这上面说了 React 中,最基本的将内容渲染到页面的方法

    但是我们还是有一些注意事项:

      1. script 的类型,不再是 javascript ,而是 text/babel ,因为 jsx 和 js 格式有冲突,所以我们的 js 类型 只能是 text/babel 

      2. 注意 React 中的 大小写问题,有可能会将字母的大小写问题,导致出现问题

      3. 组件名的首字母大写,这并不是我们的默认这么做,而是 React 的硬性要求

      4. render 函数,中的 return 只能由一个顶层标签,不能出现多个顶层标签,在一个顶层标签里面可以随意的嵌套

      5. js 的注释在 jsx 中没有用,且可能会报错

      6. 在 jsx 中 html 该怎么写,怎么写,js 代码写在 {} 中

  让我们来看下一个案例(因为 html 的部分,都是一样的,只是 js 的部分不一样,所以,下面所有的案例都会只写 js 的部分)

    技术分享图片

  这个案例,就是将 <App></App> 组件里面的内容,如果渲染到页面上来

    注意事项:

      我们并不能直接使用 this.props.children 来进行遍历,如果我们使用 this.props.children 来遍历节点,会出一下几个问题

      1. 如果 <App></App> 里面没有内容,this.props.chidren 的值是 undefined

      2. 如果 <App></App> 里面有一个内容,this.props.chidren 的值是 object

      3. 如果 <App></App> 里面有多个内容,this.props.chidren 的值是 array

      所以,React 专门提供了遍历 this.props.children 的方法:React.Children(),这样我们便不用担心遍历后会有问题了

  下面这个案例 PropTypes 的使用

    我们需要下载的插件 prop-types.js ,还是通过 https://www.bootcdn.cn/ 的网址来进行 

    这个是我们引入的文件内容

    head 中写入的内容

    技术分享图片

    js 部分

    技术分享图片

  像 PropTypes 常用于正则验证,或者默认添加的属性

  ref 的案例

    技术分享图片

  注意事项:

    this.ref 是真实的节点,所以需要等到虚拟 dom 添加到文档中才可以获取

React

原文:https://www.cnblogs.com/shangjun6/p/11426601.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!