React学习笔记,学习笔记

作者: 韦德国际1946手机版  发布:2019-10-08

笔记仿效:阮一峰react入门教程

实例

https://codepen.io/pen

图片 1

image.png

React学习笔记,学习笔记。https://github.com/facebook/react

A declarative, efficient, and flexible JavaScript library for building user interfaces.

https://reactjs.org

React is a JavaScript library for building user interfaces.

  • Declarative:

    React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable, simpler to understand, and easier to debug.

  • Component-Based:

    Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.

  • Learn Once, Write Anywhere:

    We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code. React can also render on the server using Node and power mobile apps using

    React Native.

Learn how to use React in your own project.

历史观的浏览器 DOM 操作与爱慕复杂性越来越高。
React 的现身正式为了消除 DOM 操作的题目。

React 的闪光点是在接纳数据发生变化的时候。React 中有个 state 的定义。当 state 爆发改换时,React 会自动 render 客户分界面。这年,数据本身的扭转成为咱们确实需求关心的点。

React:引领以往的客户分界面开荒框架,翻阅书籍之后,相符初专家学习,做出学习安插和学习笔记。
时间

一、React初探

1.特点

  • 依照组件,组件里面有自身的state,用组件来做复杂的UI;
  • 用JavaScript语言逻辑并不是模板;
  • 当你转移多少的时候它能够便捷翻新;
  • React不是叁个完整的MVC,MVVM框架;
  • React跟Web Components不冲突;
  • React的脾性是“轻”,渲染、响应比不慢;
  • 组件化的费用思路,中度可选用。

JSX 语法

https://reactjs.org/docs/introducing-jsx.html

https://reactjs.org/docs/jsx-in-depth.html

  1. mixin的采用(es6后不引入应用,建议使用高阶组件)
    2. 性质优化(shouldComponentUpdate【会影响state里面包车型客车值的翻新,影响恶劣,不提出接纳!!!】,不可变性帮衬插件,键key)
    3. 服务端渲染(React.renderToString,React.renderToStatic马克up),生命周期,设计组件,异步状态,同构路由,单例实例及上下文
  2. 广大类库(Jest,Immutable)
  3. 开拓工具(Browserify,webpack)
  4. 测量检验(工具,mixin测量检验,函数监视,服务器测量检验,浏览器自动化测验)
  5. 架构形式(路由,数据流,Flux,Store)
  6. 体制的自适应(bootstrap样式的自适应原理)
  7. 行使场景
    10. Fetch职能详细(Fetch基础定义,与观念的ajax的异同性别,宽容方案,重新打包)
es6写法 code
  import React from 'react';
  import ReactDOM from 'react-dom';
  import PropTypes from 'prop-types';

  class App extends React.Component { 
      state = {
          title: '环球大前端'
      }
      render() {
          const { title } = this.state;
          const { name } = this.props
          return (
            <div>
                <h2>{title}</h2>
                <p> Hello {name}! </p>
            </div>
          )
      }
  }
  App.propTypes = {
      name: PropTypes.string
  }
  App.defaultProps = {
      name: '帅气小伙子'
  }
  ReactDOM.render(<App name="24小清新" />, document.getElementById('app'));

2.走访三个总结的机件例子

react组件用render()方法传入数据和再次回到。上边那些例子用了一种长得像XML的语法——jsx。输入的数码能够透过render()this.props来传进组件。

class HelloMessage extends React.Compontent { render() { return <div>Hello {this.props.name}</div>; }}ReactDOM.render(<HelloMessage name="Jane" />,mountNode);

React.Component

https://reactjs.org/docs/react-component.html

书籍链接:
https://item.jd.com/11688174.html

es5写法(可惜的是现行反革命流行版本的react,已经不再能选取createClass去创建react组件了 code)
var App = React.createClass({
    getDefaultProps: function() {
      return {
        name: '帅气小伙子'  
      }  
    },
    getInitialState: function() {
        return {
            title: '环球大前端'
        }
    },
    render: function() {
      return (
        <div>
            <h2>{this.state.title}</h2>
            <p> Hello {this.props.name}! </p>
        </div>
      )
    }
})
React.render(<App name="24小清新" />, document.getElementById('app'));

核激情想:封装组件,种种零部件维护和睦的意况(state, prop)和UI,当状态改造,自动重新渲染组件,数据流向是单向的。

须求了解的多少个基础概念:

1、什么是JSX?

2、如何修改组件state,进而修改组件UI?

3、事件管理

对于上述那么些既不是字符串亦不是 HTML的的竹签语法,被称为JSX,是一种 JavaScript 的语法增添,用来汇报客户界面。

常用的是在JSX中选拔表明式,比如 2 2, user.firstName, 以及 formatName(user),条件判定(三目运算符、&&), 数组Map函数遍历获取React成分 都以足以动用的。如:

    formatName(user) {
        return `${user.firstName}-${user.name}`;
    }
    const user = {
        firstName: 'wu',
        name: 'shaobin'
    }
    const show = true; //我可以是this.state属性哦!!!
    const arr = ['xiaobin', 'kaizi', 'liujun'];
    const element = (
      <div>
        <h1>Hello, {formatName(user)}!</h1>
        <h1>Hello, {user.name}!</h1>
        <h1>Hello, { 1   1 }!</h1>
        <h1>Hello, { show ? 'I am show' : null }</h1>
        <h1>Hello, { arr.length > 0 && 数组长度大于0 }</h1>
        {
            arr.map((item, index) => {
                return item    
            })
        }
        //记住数组Map函数遍历获取React元素的时候,必须要记得必须➕keys属性
        // 为啥呀?
        //Keys可以在DOM中的某些元素被增加或删除的时候帮助React识别哪些元素发生了变化。因此你应当给数组中的每一个元素赋予一个确定的标识。没有唯一值的时候可以使用index,但是官方不建议,会导致渲染变慢。
      </div>
    );
    ReactDOM.render(
      element,
      document.getElementById('root')
    );

纪事每一个组件的render函数重返的JSX结构都急需根元素去包裹着,当然也会有两样,如React.Fragment

对于JSX,react最后经babel的转变会调用React.createElement相应api转换到react能识其余对象,如上述例子转变后获得:

React.createElement(
    'div',
    null,
    React.createElement(
        'h2', //可以是一个html标签名称字符串,也可以是也可以是一个 React component 类型
        null,
        title
    ),
    React.createElement(
        'p',
        null,
        ' Hello ',
        name,
        '! '
    )
);

babel查看es6->es5的结果

既然大家得感觉组件初叶化状态,也非得要能够去改动它,以高达改换视图。
当然this.state.xxx = xxx不会接触渲染组件的动作,而是使用this.setState({ xxx: xxx })情势来修改情状,同不平时间几个setState() 调用统10%二个调用能压实质量。

对于事件管理,需求留意的一点正是this的绑定,其余跟普通Dom绑定监听事件一样,this的绑定有以下两种格局:

  1. 在构造函数中动用bind绑定this
  2. 在调用的时候使用bind绑定this
  3. 在调用的时候使用箭头函数绑定this
  4. 运用性质伊始化器语法绑定this

setState与事件管理的例子

本文由韦德国际1946发布于韦德国际1946手机版,转载请注明出处:React学习笔记,学习笔记

关键词: react React.js 学习笔记 Nowa:极简...