【4858美高梅】的双向数据绑定,webpack从0到一耗费2个todoMvc

By admin in 4858美高梅 on 2019年4月2日

  学习过angular和vue的人都清楚,它俩在落实双向数据绑定都是有1个尤其的内置指令ngModel和v-model

vue的优点
  • vue的插件机制

不用像react壹层一层得包裹,也不用在各种模块中开展import。

  • vue有模板系统

支撑创设步骤,能够运用预处理器(pug,sass)
能够一贯书写css,能够一贯再模板中使用class(react中须要动用clasName)

  • 抱有多少的双向绑定

而在react中供给监听onChange事件,触发事件来完成数据绑定
react有render函数,可以

  • 富有更好的属性

  • 越来越融洽

react强调把html和css都写进js中,而vue能够完毕html,css和js的分别。

react官网教程基础解析

React如何双向绑定

todoMvc-2step源码
todoMvc-2step演示
上壹章重点说了下react+webpack的环境搭建,那一章重点讲一下怎样双向绑定。对vue和angular略有理解的都明白,那五个框架都以支撑双向绑定的,而react是单向绑定的,果壳网有1篇关于单向绑定和双向绑定能够开始展览一下:单向数据绑定和双向数据绑定的得失,适合哪些境况?

只是在react中从不这么些。

react的优点
  • 社区更是成熟,第2方组件会会愈来愈的多。
  • 拥有react native
  • state是不可变的,想要修改state要求显式得调用setState,易于发现错误

1、使用redux和尚未redux,react写法有怎么着两样吧?

答:组件写法1样,可是state不自然交给组件内部管理,恐怕放到store上统一保管。

上面分析哪些具体落实

跻身大家的app.js文本,在之前我们搭建环境的时候曾经设置了react相关的依靠以及babel编译工具,所以大家得以一向在此地运用ES6JSX语法。

  所以大家在react中想要达成双向数据绑定要调用一个onChange事件来模拟。

2、认识react,一个hello world!

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

一.引入react核心内容

import React from 'react'
import ReactDOM from 'react-dom'

个中,react.js 是 React 的中坚库,react-dom.js 是提供与 DOM 相关的法力。

<Input type="text" onChange={e => {this.setState({cellphone:e.target.value})}}/>
{this.state.cellphone}

叁、怎么着采纳react?

答:推荐您采取ES陆语法来写react,首先你须要Babel编译你的ES6代码,其次,你才能够行使诸如
=> (箭头函数),class(类),模板文字,let和const语句等ES陆语法。

二.生成组件

先介绍react八个比较重大的知识点:
1)ReactDOM.render()
ReactDOM.render 是 React 的最基本格局,用于将模板转为 HTML
语言,并插入钦定的 DOM 节点。举个例子:

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);

地点代码将二个 h一 标题,插入 example 节点。
2)JSX 语法
HTML 语言直接写在 JavaScript 语言之中,不加任何引号,那正是 【4858美高梅】的双向数据绑定,webpack从0到一耗费2个todoMvc。JSX
的语法,它允许
HTML 与 JavaScript
的混写,上面的<h1>Hello, world!</h1>,正是运用了jsx语法。
3)组件
React 允许将代码封装成组件(component),然后像插入普通 HTML
标签1样,在网页中插入那个组件。React.createClass
方法就用来转移贰个零件类。举个:

#es5写法
 var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello React</h1>;
  }
});
#es6写法
Class HelloMessage extends React.Component {
  render() {
    return <h1>Hello, React</hr>;
  }
}

当然,这里的HelloMessage作者们也能够作为HTML标签用ReactDOM.render()渲染出来。

app.js:

class App extends React.Component { //定义组件,继承父类
  constructor() {//constructor 是和 class 一起用来创建和初始化对象的特殊方法。
    super()//在装载组件(mounting)之前调用会React组件的构造函数。当实现React.Component子类的构造函数时,应该在任何其他语句之前调用super(props)
    this.state = {//设置初始状态
      todos: []
    }
  }
  // 绑定键盘回车事件,添加新任务
  handlerKeyUp(e) {
    if(e.keyCode == 13) {
      let value = e.target.value;
      if(!value) return false;
      let newTodoItem = {
        text: value,
        isDone: false
      };
      e.target.value = '';
      this.state.todos.push(newTodoItem)
      this.setState({todos: this.state.todos});  //修改状态值,每次修改以后,自动调用 this.render 方法,再次渲染组件。
    }
  }
  render(){
    return (
      <div className="todo-input">
        <input type="text" placeholder="请输入待办事项" onKeyUp={this.handlerKeyUp.bind(this)}/>
        <ul>
          {this.state.todos.map((todo,index) => {{
            return (
                <li key={index}>{todo.text}</li>//Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity
            )
          }})}
        </ul>
      </div>
    )
  }
}
ReactDOM.render(<App/>,document.getElementById('app'))

4858美高梅 1

4、JSX介绍

答:JSX是1种表明式,它有二个根标签,在里面能够放置表明式,使用{}(大括号)包裹起来。它看起来正是html的一局地,恐怕叫二个html模块。

class T extends React.Component {
    render() {
        return <div className="left-enter" style={}>{value}</div>
    }
}

从下边包车型大巴代码例子你能够看看多少个和html分歧的地方,class
=》className,style是叁个object,你还能在dom成分中应用{}插入数据。

行使JSX还能预防XSS(跨站脚本攻击),因为JSX只是表达式,它供给先转换来字符串,然后才能渲染到真实DOM上边,但对于确实的黑客来说,那种做法也不是高枕无忧的。

3.测试

运行

$ webpack

然后打开index.html,假如能够在input输入,按下回车能够在江湖生成list

4858美高梅 2

打响画面

那便是说恭喜您,双向绑定效率周详成功!
React+webpack从0到一支付1个todoMvc(1)
React+webpack从0到一付出3个todoMvc(三)
React+webpack从0到一费用三个todoMvc(四)
React+webpack从0到一支出一个todoMvc(5)

诸如此类那就能够完成它的多个双向数据绑定了。

四、成分和零部件的概念

react组件:

class T extends React.Component {
    render() {
        return <div className="left-enter" style={}>{value}</div>
    }
}

react元素:

<div className="left-enter" style={}>{value}</div>

 

伍、组件的运用

函数组件:函数组件未有动静和生命周期,不过你能够回来三个react成分。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

class组件:分外强劲,有友好的state和生命周期。和函数组件壹样,class组件也须求重返二个react成分。

class Welcome extends React.Component {
  componentWillMount() {}
  componentDidMount() {}
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

在二个非常大复杂的网址使用中,要怎样拆分组件呢?官网上说组件拆分的越细,复用性就越强,从事实上开销中来看,这些说法尚未错,可是
会带动3个相比较严重的题材,就是组件太多,管理起来不方便人民群众。有人利用第一方react组件的时候,唯有那三个文书档案非凡有力的开源组件
才能给你的支付升高功用。要是您自身的组件也想拆分到细致,那么写好文书档案是最重要的一步。

react还关乎了少数,传递给组件的多少是”只读”的,要确认保证组件中的数据是”纯数据”,输入即出口。那么,借使您须要在组件中期维修改props.data
该如何做啊?

render() {
    const { data } = this.props
    //定义一个新的变量来保存修改后的值。
    let _data = data + 1;
}

陆、组件的气象和生命周期

面前大家关系组件分为函数组件和类组件,函数组件是无状态,类组件有气象和生命周期。

什么是气象?

答:通俗明了,就是组件不相同时候的分化表现,比如,二个按钮组件,大概有激活状态,不可点击状态,显示状态,隐藏状态等,在react用state来保存这么些境况。
而state本人不仅仅意味着组件状态,还是可以保存组件的数目。

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        isShow: true,
        text: props.text,
        disabled: true
    };
  }

  render() {
      const { isShow, text, disabled} = this.state
      return <button disabled={disabled} style={{display: isShow ? "block" : "none"}}>{text}</button>
  }
}

假使要修改state,请使用,注意,你无法在render函数里面平素改动state,而是要经过事件去触发state更新。

this.setState({
    isShow: false,
    disabled: false
})

鉴于setState有批处理作用,所以该措施也许不必然壹起立异,假诺您供给正视上1回的状态和此番状态的总结,那么要求写成下边那种样式。

this.setState((prevState, props) => {    
      text: prevState.text++
    });

demo网址:http://codepen.io/hyy1115/pen/GmdOKJ?editors=0011

有时候,子组件不供给关爱自己的图景,而是经过父组件的情形来改变,那时候的子组件能够写成函数方式,通过props传递父组件给的情形。

react生命周期
生命周期表示组件的生平,从出生到小雪到已仙逝,中间最重点也是最常用的二个情状是:

component威尔Mount:出生了,把组件的景色和总体性都设置好。

componentDidMount:渲染出来了,小编不再是JSX,而是真实DOM了。

component威尔Unmount:要死了,死此前把遗产处理好。

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        isShow: true,
        text: props.text,
        disabled: true
    };
  }

  componentWillMount() {
      //出生了,可以给我数据和设置我的状态
  }
  componentDidMount() {
      //活着多好
  }
  componentWillUnmount() {
      //要死了,把我的一生痕迹都清除
  }

  render() {
      const { isShow, text, disabled} = this.state
      return <button disabled={disabled} style={{display: isShow ? "block" : "none"}}>{text}</button>
  }
}

还有别的多少个生命周期,并不是充裕常用,供给采取的时候去看下别人的博客。

7、事件处理

 <button onClick={(e) => this.handleClick(e)}>
 按钮
</button>

<input type="text" onChange={(e) => this.handleClick(e)} />

8、条件渲染

前方button的事例我们早已采纳到了条件渲染,条件渲染通过state来判定,常用的是控制style、className、DOM属性,JSX。

举多少个常用的例证。

render() {
    return (
        <div>
        {
            this.state.isShow && <button>按钮</button>    
        }
        </div>
    )
}

render() {
    return (
        <div>
        {
            this.state.isShow ? <button>按钮</button> : 文本
        }
        </div>
    )
}

render() {
    return <button disabled={this.state.disabled}>按钮</button>
}

九、列表渲染

一个注意点:

数组要认清是不是为空;

总得给2个key。

render() {
    const { arr } = this.state
    return arr.length > 0 && arr.map((value, key) => <li key={key}>{value}</li> )
}

10、表单

自家已经经历过的二遍阿里的面试,就考到了react表单的知识点。

受控组件:由react控制输入的表单组件。

在底下的事例中,input的value值由state来决定,用户输入触发onChange事件,然后更新state,达到修改value的指标。

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  render() {
    return (
          <input type="text" value={this.state.value} onChange={this.handleChange} />
    );
  }
}

莫不你没看出来和正宗input成分的差异,看二个真正DOM元素的例子,value由inupt自己爱慕,大家从未给value绑定值。

<input type="text">

textarea和input是同样的用法。

select有稍许两样,将value绑定到select上,而不是option。

<select value={this.state.value} onChange={this.handleChange}>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

还有1种是八个输入框的图景,比如登录,有账号、密码等,那时候操作那一个分裂的input可以由此ref恐怕name,class,id等方式去setState,看
官方demo。

class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isGoing: true,
      numberOfGuests: 2
    };

    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  render() {
    return (
      <form>
          <input
            name="isGoing"
            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange} />
          <input
            name="numberOfGuests"
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
      </form>
    );
  }
}

不受控组件:相当粗略,就是DOM本人维护状态的组件,不受react控制。你能够给它设置defaultValue,可是不可能去setState。

<input type="text" ref={(input) => this.input = input} defaultValue="默认值"/>

深信有人会试过设置defaultValue之后进行了setState去修改value,那样做决定台会发出警示。

总结:受控组件是指受react控制的零件,表单组件中的value和state同步,不受控组件是指不受react控制的零部件,表单组件中的
value不通过state同步,只好操作DOM去读取value。

11、状态升高

您早晚听新闻说过变量升高,函数升高,那么情状提高是如何吧?

先是你得询问双向绑定和单向数据流,双向绑定中,数据足以在不一致的组件之间达成共享,那样压实在有十分大的功利,不过在react中,
不引进应用双向绑定,而是使用状态升高的方法。

记得和Ali的1个面试官聊的时候,他须要自小编用react完结双向绑定,而小编觉得react应该运用状态进步来达成。最终没说服他,或然让Dan来
和她推搡才有用,哈哈。

动静升高:state推崇单向数据流,数据从父组件通过props流向子组件,借使您在子组件中,供给修改state来和任何子组件共享数据更新,
您必要选用回调函数给使数据更新给父组件,然后从父组件流向其余的子组件,那样做是保障数据有纯粹的源于。

一经实子组件和子组件之间自由共享数据,那么,早先时期维护会比较难熬,尤其是找bug的时候。

看二个动静升高的事例吗。

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.props.upDateValue(e.target.value);
  }

  render() {
    const {name, value} = this.props;
    return (
      <div>
        <p>{name}:</p>
        <input value={value}
               onChange={this.handleChange} 
          />
      </div>
    );
  }
}

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: '', name: ''};

    this.upDateValue = this.upDateValue.bind(this);
  }

  upDateValue(value) {
    this.setState({value: value})
  }

  render() {
    const {value} = this.state;

    return (
      <div>
        <Child name="组件1" value={value} upDateValue={this.upDateValue} />
        <Child name="组件2" value={value} upDateValue={this.upDateValue} />
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />,
  document.getElementById('root')
);

demo网址:http://codepen.io/hyy1115/pen/xdjoZQ?editors=0011

4858美高梅 ,12、采纳组合照旧连续?

用过原生js或许jQuery的同室可能对基础1贰分熟稔,继承能够实现扩张很多功用。

在react组件开发中,大家的各类react组件都以连续于React.Component。

class MyComponent extends React.Component {

}

大家不引进您继承MyComponent。

//不推荐
class NextComponent extends MyComponent {

}

你应有足够利用react组件的强有力品质,开发各个你须求的组件继承至React.Component。组件之间的嵌套拾壹分有力,你能够嵌套函数组件,嵌套类组件。

端详前往:https://facebook.github.io/react/docs/composition-vs-inheritance.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有