精华内容
下载资源
问答
  • react学习

    2020-06-19 18:13:50
    React 可以直接下载使用,下载包中也提供了很多学习的实例。 本教程使用了 React 的版本为 16.4.0,你可以在官网 https://reactjs.org/ 下载最新版。 你也可以直接使用 Staticfile CDN 的 React CDN 库,地址如下: ...

    参考来源菜鸟教程
    前期需要Node.js和webpack

    React

    组件化:抽离UI组件
    react没有.vue这样的模板文件,一切都是以JS来表现的 script
    ES6和ES7(async和await)要合格!

    概念

    虚拟DOM 文档对象模型

    DOM:浏览器端有dom概念,用JS对象来表示页面上的元素,还提供了一些操作DOM对象的API
    虚拟DOM:框架中,用JS对象来模拟页面上的DOM和DOM嵌套
    为了实现页面上dom元素的高效更新:从内存中获取新旧两个dom树,对比,得到需要按需更新的dom元素
    程序员可以手动模拟新旧两个dom树,就是虚拟dom的概念
    虚拟dom:用JS对象的形式来模拟页面上dom元素和嵌套关系(虚拟dom以JS对象的形式存在)
    目的实现页面元素的高效更新
    HTML声明一个dom元素: <div id=”mydiv“ title=”说“ data-index=”0“> 哈哈 <p>你</p> </div> JS一个dom元素: var div = { tagName:'div', attrs:{ id:'mydiv', title:'说', 'data-index':'0' }, childrens:[ '哈哈', { tagName:'p', attrs:{}, childrens:[ ‘你’ ] } ] }

    网页呈现过程

    1.浏览器请求服务器获取页面HTML代码
    2.浏览器要先在内存中解析DOM结构,并在浏览器内存中,渲染出一科dom树
    3.浏览器把dom树,呈现到页面上

    Diff算法

    tree diff :Tree按层对比
    component diff:在tree diff中每层组件级别的对比
    element diff:组件对比中,类型相同则进行元素级别的对比

    React安装

    React 可以直接下载使用,下载包中也提供了很多学习的实例。

    本教程使用了 React 的版本为 16.4.0,你可以在官网 https://reactjs.org/ 下载最新版。
    你也可以直接使用 Staticfile CDN 的 React CDN 库,地址如下:
    引用时写到部分

    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    

    官方提供的 CDN 地址:

    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    
    引入三个库:

    react.min.js - React 的核心库
    react-dom.min.js - 提供与 DOM 相关的功能
    babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码,这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包(package)一同使用可以让源码的语法渲染上升到一个全新的水平。
    举例:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    </head>
    <body>
     
    <div id="example"></div>
    <script type="text/babel">
    ReactDOM.render(
        <h1>Hello, world!</h1>,   	<--这里将h1标题,插入id=examle节点中-->
        document.getElementById('example')
    );
    </script>
    </body>
    </html>
    

    React元素渲染

    与浏览器的 DOM 元素不同,React 当中的元素事实上是普通的对象,React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。
    具体见:https://www.runoob.com/react/react-rendering-elements.html
    React元素渲染到根DOM节点中,我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上:

    <div id="example"></div>
    <script type="text/babel">
    const element =<h1>Hello, world!</h1>;
    ReactDOM.render(
        element,
        document.getElementById('example')
    );
    </script>
    
    更新元素渲染
    <div id="example"></div>
    <script type="text/babel">
    function tick() {
      const element = (
        <div>
          <h1>Hello, world!</h1>
          <h2>现在是 {new Date().toLocaleTimeString()}.</h2>
        </div>
      );
      ReactDOM.render(
        element,
        document.getElementById('example')
      );
    }
    setInterval(tick, 1000);
    </script>
    

    对上部的内容封装:

    <div id="example"></div>
    <script type="text/babel">
    function Clock(props) {
      return (
        <div>
          <h1>Hello, world!</h1>
          <h2>现在是 {props.date.toLocaleTimeString()}.</h2>
        </div>
      );
    }
    function tick() {
      ReactDOM.render(
        <Clock date={new Date()} />,
        document.getElementById('example')
      );
    }
    setInterval(tick, 1000);
    </script>
    

    继续改造:

    <div id="example"></div>
    <script type="text/babel">
    class Clock extends React.Component {
      render() {
        return (
          <div>
            <h1>Hello, world!</h1>
            <h2>现在是 {this.props.date.toLocaleTimeString()}.</h2>
          </div>
        );
      }
    }
    function tick() {
      ReactDOM.render(
        <Clock date={new Date()} />,
        document.getElementById('example')
      );
    }
    setInterval(tick, 1000);
    </script>
    

    react JSX 替换js

    const element = <h1>Hello, world!</h1>;
    

    要将 React 元素渲染到根 DOM 节点中,我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上:

    <div id="root"></div>
    	<script type="text/babel">
    	const element = <h1 className="foo">Hello, world</h1>;
    	ReactDOM.render(element, document.getElementById('root'));
    	</script>
    
    实例中的 p 元素添加了自定义属性 data-myattribute,添加自定义属性需要使用 data- 前缀。
    <div id="example"></div>
        <script type="text/babel">
          ReactDOM.render(
          	<div>
          	<h1>菜鸟教程</h1>
          	<h2>欢迎学习 React</h2>
            <p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
            </div>
          	,
          	document.getElementById('example')
          );
        </script>
    
    展开全文
  • React学习

    2017-09-18 09:44:33
    七个不可错过的 React 组件库与开发框架在 2017 年学习 React + Redux 的一些建议(上篇)在 2017 年学习 React + Redux 的一些建议(中篇)在 2017 年学习 React + Redux 的一些建议(下篇)
    展开全文
  • react 学习

    2016-08-11 13:56:25
    找到基础视频教程 一个是慕课网的react 用pad下载的一个是宁浩网的视频,不放链接了。react 搭建需要哪些知识?引用书籍:React 引领未来的用户界面开发框架基础:1:JSX JS中编写声明式XML方法。2:管理组件的生命...

    找到基础视频教程 一个是慕课网的react 用pad下载的

    一个是宁浩网的视频,不放链接了。

    react 搭建需要哪些知识?

    引用书籍:React 引领未来的用户界面开发框架

    基础:

    1:JSX JS中编写声明式XML方法。

    2:管理组件的生命周期

    3:数据流,数据流如何在组件树种上下传递,哪些数据可以修改,props 和state的区别和联系。

    4:事件处理

    5:组件的复合

    6:mixin — 组件共享

    进阶:

    1:DOM 操作: React 哪些生命周期可以安全使用DOM 什么时候释放DOM 避免内存泄漏

    2:表单 :HTML 表单 ,React 组件中有HTML表单的状态,提供了控制力。

    3:动画 :给React 添加 CSS 动画。

    4:性能优化: 当组件没有发生变化的时候,告诉渲染器无需渲染组件。

    5:服务端渲染:非浏览器环境下也能渲染,如何做同时支持服务端和客户端的渲染。

    6:周边类库: 如何把周边类库与React 组合到一起。

    工具:

    1.开发工具:自动打包React 。使用chorme 可视化React 组件,简化测试。

    2.测试工具:编写测试。

    实践:

    16:架构模式:React 的大规模应用

    17:其他使用场景:除了Web以外的使用场景。

    图示为

    这里写图片描述

    找到源码 http://blog.csdn.net/mqy1023/article/details/51755426

    照着敲

    在线测试网站 :

    http://jsbin.com/?html,output

    react 不能写 放弃使用

    编写这个需要引入本地的react 库

    使用webstorm编程

    这里写图片描述

    会报错,暂时用在线工具学习语法

    使用JSfiddle
    http://jsfiddle.net/reactjs/69z2wepo/

    这里写图片描述

    —–JSX 语法——

    html 部分需要引入react 资源

    <script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

    html body 部分

    <div id="container">
        <!-- This element's contents will be replaced with your component. -->
    </div>

    渲染通过DOM,获取到container,然后变更html内容。最外层用div包裹起来,里面的的部分再单独写var 变量 引用进来就好了。

    ReactDOM.render(
      <div>
        <We/>
        <Hello name="world"/>
      </div>,
      document.getElementById('container')
    );
    
    <We/>

    指的是

    var We = React.createClass({
      render: function() {
        return <h1>
        wwwwwwwwwwwwwwww
        </h1>;
      }
    });

    同理

     <Hello name="world"/>

    指的是 hello变量 包含属性为name

    var Hello = React.createClass({
      render: function() {
        return <div>
        Hello My {this.props.name}
        </div>;
      }
    });

    因此 打印结果为:

    wwwwwwwwwwwwwwww
    
    Hello My world

    打印日期信息语句

    var text = ['hello', ' world!'];
    
    function date2String(d) {
        return [
                d.getFullYear(),
                d.getMonth() + 1,
                d.getDate(),
        ].join('-');
    };
    
    var LabelText = React.createClass({
        render: function() {
            return <div>{text}, {date2String(new Date())}</div>;
        }
    });

    添加到div 中

    <LabelText />

    结果

    hello world!, 2016-8-12

    继续
    数组的写法:

    var names = ['Alice', 'Emily', 'Kate'];

    DOM里面添加

        <div>
        {
          names.map(function (name) {
            return <div>Hello, {name}!</div>
          })
        }
        </div>,

    结果,遍历了names数组里的元素,注意加个div包裹起来

    Hello, Alice!
    Hello, Emily!
    Hello, Kate!

    当遇到 < JSX就当HTML解析,遇到 { 就当JavaScript解析。

    ================================================
    jsfiddle 有时候会无法访问,然后数据就都丢了,或者长时间无法显示

    尝试使用subline

    找到一些封装好的开源组件
    http://madscript.com/boron/

    http://madscript.com/halogen/

    更换为阮一峰的教程:

    http://www.ruanyifeng.com/blog/2015/03/react.html

    下载他的demo 跑起来试一下

    WebStrom 打开还是语法报错,只是不影响使用,

    程序可以正常运行

    这里写图片描述

    继续研究

    ================================================

    <!DOCTYPE html>
    <html>
      <head>
        <script src="../build/react.js"></script>
        <script src="../build/react-dom.js"></script>
        <script src="../build/browser.min.js"></script>
      </head>
      <body>
        <div id="example"></div>
        <script type="text/babel">
          var HelloMessage = React.createClass({
            render: function() {
              return <h1>Hello {this.props.name}</h1>;
            }
          });
          var Hello = React.createClass({
            render: function() {
              return <HelloMessage name="John" />;
            }
          });
          var ElementFirst = React.createClass({
            render: function() {
              return <div>
              <Hello/>
              <Hello/>
              <Hello/>
              <Hello/>
              </div>;
            }
          });
    
          ReactDOM.render(
                  <div>
           <ElementFirst />
                  </div>,
            document.getElementById('example')
          );
        </script>
      </body>
    </html>
    

    运行结果

    Hello John
    Hello John
    Hello John
    Hello John

    render 只用div包裹一个ElementFirst,

      ReactDOM.render(
                  <div>
           <ElementFirst />
                  </div>,
            document.getElementById('example')
          );

    结构都放到ElementFirst 函数里

    var ElementFirst = React.createClass({
            render: function() {
              return <div>
              <Hello/>
              <Hello/>
              <Hello/>
              <Hello/>
              </div>;
            }
          });

    这样写起来就全部分开了,叫做组件化

    子类:

    <!DOCTYPE html>
    <html>
      <head>
        <script src="../build/react.js"></script>
        <script src="../build/react-dom.js"></script>
        <script src="../build/browser.min.js"></script>
      </head>
      <body>
        <div id="example"></div>
        <script type="text/babel">
          var NotesList = React.createClass({
            render: function() {
              return (
                <ol>
                  {
                    React.Children.map(this.props.children, function (child) {
                      return <li>{child}</li>;
                    })
                  }
                </ol>
              );
            }
          });
    
          ReactDOM.render(
            <NotesList>
              <span>hello</span>
              <span>world</span>
            </NotesList>,
            document.getElementById('example')
          );
        </script>
      </body>
    </html>
    
    

    结果

    这里写图片描述

    分析结构:

    组件 NotesList

    这里是用组件化来写 html 的列表代码 html 结构

    如果是 html 的写法

    <ol>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>

    结果

    这里写图片描述

    组件化的写法 创建 NotesList 组件

    var NotesList = React.createClass({
            render: function() {
              return (
                <ol>
                  {
                    React.Children.map(this.props.children, function (child) {
                      return <li>{child}</li>;
                    })
                  }
                </ol>
              );
            }
          });

    其中

                  {
                    React.Children.map(this.props.children, function (child) {
                      return <li>{child}</li>;
                    })
                  }

    这段代码的意思是 遍历组件的子节点,传入节点,

    按照序列排布

    然后在DOM中编写NotesList子节点

            <NotesList>
              <span>hello</span>
              <span>world</span>
            </NotesList>,

    明显 hello 和world 的span节点是NotesList子节点child,

    自然会按照li的顺序排布到里面去了 ,

    这样可以把子节点分离出来。

    关键代码 this.props.children 代表子节点

    React.Children.map(this.props.children, function (child) {
                      return <li>{child}</li>;
                    })

    prop还可以设置默认属性

    var MyTitle = React.createClass({
      getDefaultProps : function () {
        return {
          title : 'Hello World'
        };
      },
    
      render: function() {
         return <h1> {this.props.title} </h1>;
       }
    });
    
    ReactDOM.render(
      <MyTitle />,
      document.body
    );

    —————DOM 属性————–

    1.ref允许在render之外进行访问

    这里写图片描述

    <!DOCTYPE html>
    <html>
      <head>
        <script src="../build/react.js"></script>
        <script src="../build/react-dom.js"></script>
        <script src="../build/browser.min.js"></script>
      </head>
      <body>
        <div id="example"></div>
        <script type="text/babel">
    var MyComponent = React.createClass({
      handleClick: function() {
        this.refs.myTextInput.focus();
      },
      render: function() {
        return (
          <div>
             <input type="text" ref="myTextInput" />
            <input type="button" value="Focus the text input" onClick={this.handleClick} />
          </div>
        );
      }
    });
    
    ReactDOM.render(
      <MyComponent />,
      document.getElementById('example')
    );
        </script>
      </body>
    </html>

    这里写图片描述

    关键点

      <input type="text" ref="myTextInput" />

    添加id

      handleClick: function() {
        this.refs.myTextInput.focus();
      },

    通过id获取到对象,执行对象的方法。

    注意点:

    组件 MyComponent 的子节点有一个文本输入框,用于获取用户的输入。这时就必须获取真实的 DOM 节点,虚拟 DOM 是拿不到用户输入的。为了做到这一点,文本输入框必须有一个 ref 属性,然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。
    需要注意的是,由于 this.refs.[refName] 属性获取的是真实 DOM ,所以必须等到虚拟 DOM 插入文档以后,才能使用这个属性,否则会报错。上面代码中,通过为组件指定 Click 事件的回调函数,确保了只有等到真实 DOM 发生 Click 事件之后,才会读取 this.refs.[refName] 属性。
    React 组件支持很多事件,除了 Click 事件以外,还有 KeyDown 、Copy、Scroll 等,完整的事件清单请查看官方文档。


    this.state

    var LikeButton = React.createClass({
      getInitialState: function() {
        return {liked: false};
      },
      handleClick: function(event) {
        this.setState({liked: !this.state.liked});
      },
      render: function() {
        var text = this.state.liked ? 'like' : 'haven\'t liked';
        return (
          <p onClick={this.handleClick}>
            You {text} this. Click to toggle.
          </p>
        );
      }
    });
    
    ReactDOM.render(
      <LikeButton />,
      document.getElementById('example')
    );

    设置liked初始状态为false 不喜欢

      getInitialState: function() {
        return {liked: false};
      },

    设置函数handleClick,点击时 like取反

      handleClick: function(event) {
        this.setState({liked: !this.state.liked});
      },

    设置 text的内容 三目运算符

        var text = this.state.liked ? 'like' : 'haven\'t liked';

    具体内容,点击添加函数onClick={this.handleClick}

     <p onClick={this.handleClick}>
            You {text} this. Click to toggle.
          </p>

    未点击时

    这里写图片描述

    点击了以后

    这里写图片描述

    表单更新

    使用 State 不要使用 prop

    var Input = React.createClass({
    //设置初始state值  value 为hello
      getInitialState: function() {
        return {value: 'Hello!'};
      },
     //函数设置state变化,把事件目标的value传递过来
      handleChange: function(event) {
        this.setState({value: event.target.value});
      },
    
      render: function () {
      //设置value变量,代表state里的value数值
        var value = this.state.value;
        return (
          <div>
          //一个input输入框
            <input type="text" value={value} onChange={this.handleChange} />
            //显示state里的value数值
            <p>{value}</p>
          </div>
        );
      }
    });
    
    ReactDOM.render(<Input/>, document.body);

    这里要用state 不能用prop 属性,因为prop属性是定好的,状态是可以变化的。

    展开全文
  • React学习手册,React学习手册PDF React学习手册中文版,React学习手册中文版PDF React学习手册,React学习手册pdf,React学习手册-14393339,React学习手册-14393339pdf Alex,Banks,Eve,Porcello 著,邓世超 ...

    React学习手册,React学习手册PDF

    React学习手册中文版,React学习手册中文版PDF

    React学习手册,React学习手册pdf,React学习手册-14393339,React学习手册-14393339pdf

    Alex,Banks,Eve,Porcello 著,邓世超 译

     

    下载地址:

    https://download.csdn.net/download/nowsdt/11038646

     

    展开全文
  • react学习笔记

    千次阅读 多人点赞 2019-06-22 17:22:56
    react学习笔记
  • React学习笔记

    万次阅读 2019-05-14 14:16:12
    React学习笔记(一) 本文是基于Windows 10系统环境,学习和使用React: Windows 10 一、基本概念 (1) React本质 在React中一切皆js (2) DOM 浏览器中,用js对象来表示页面上的元素,并提供了操作DOM对象的API...
  • React 学习资料汇总

    2019-05-08 10:44:26
    React 学习资料汇总 React学习资源汇总 React全家桶+Antd单车后台管理系统开发
  • react学习-框架组合选择

    千次阅读 2017-05-06 08:44:07
    react学习
  • React学习路线

    千次阅读 2020-01-27 12:53:33
    React学习路线       内容大纲:                      1、  &...
  • react学习总结3--React-Router

    千次阅读 2016-12-17 14:09:06
    react 学习总结–React-Router 说明 react-route 版本 : “^3.0.0” react-router-redux 版本 ; “^4.0.7” 升级到 react-router 4 看这里 react16 + react-router4 + webpack开发环境搭建 简介 ...
  • React学习线路

    千次阅读 2016-07-13 10:03:06
    以下所谈及的,就是为你定制的 React 学习路线。 为了能稳固基础,我们一定要逐步地来进行学习。 倘若你正在建造一间房子,那么为了能快点完成,你是否会跳过建造过程中的部分步骤?如在具体建设前先铺设好部分...
  • React学习资源汇总

    2017-02-14 18:15:23
    React学习资源汇总
  • React学习-hock钩子

    2020-10-21 14:08:18
    React学习-hock钩子 什么是hock钩子? 为了弥补函数式组件没有生命周期和状态的缺点 如何使用呢? 首先我们引入 import React,{useState} from 'react'; 设置const const [状态的名字,修改状态的方法]=...
  • React学习心得浅谈

    千次阅读 2018-12-24 20:27:44
    文章目录React学习浅谈(1)-技术栈1. React技术栈1.1. 运行编译环境1.2. ES61.3. React1.4 Redux1.5 Middleware2. 环境搭建2.1 搭建开发环境2.2 搭建编译环境2.3 搭建完整的项目开发环境3. 编码设计3.1 创建项目...
  • React学习笔记----如何在html页面中使用react 一、ReactJS简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做...
  • react学习01

    千次阅读 2020-07-06 15:55:59
    React 中,需要安装 两个包 react react-dom // 1.1 react 这个包,是专门用来创建React组件、组件生命周期等这些东西的; // 1.2 react-dom 里面主要封装了和 DOM 操作相关的包,比如,要把 组件渲染到页面上 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 29,305
精华内容 11,722
关键字:

react学习