• React


      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 添加到文档中才可以获取,还有注意 this 问题,所以我们的函数采用 es6 的语法

      但表单是一个特别的案例:

        

      表单的东西不能通过 this.props 查看,因为表单跟组件一种互动,不能获取,而是定义一个 onChange 的事件回调,来获取表单的值

      有关生命周期的案例

        

      React 的生命周期分三个状态分别是:mount  update  unmount

      常见的钩子函数:componentDidMount()  // 组件加载到页面后,执行此钩子函数

              componentDidUpdate()  //组件更新完成后(修改数据后),执行此函数

      ajax 的案例(因为放不下,所以截图截了两次),需下载 axios.js 的插件

      head:

        

      js:

        

        

      这样的话,我们的基本操作,就做完了

      

  • 相关阅读:
    紫书 例题8-18 UVa 1442 (扫描法)
    紫书 例题8-17 UVa 1609 (构造法)(详细注释)
    紫书 例题8-16 UVa 1608 (递归)
    紫书 例题8-15 UVa 12174 (滑动窗口)
    紫书 例题8-14 UVa 1607 (二分)
    紫书 例题8-13 UVa 11093 (反证法)
    紫书 例题8-12 UVa 12627 (找规律 + 递归)
    Codeforces Round #441 (Div. 2, by Moscow Team Olympiad)
    CodeForces
    CodeForces 444C 线段树
  • 原文地址:https://www.cnblogs.com/shangjun6/p/11426601.html
Copyright © 2020-2023  润新知