react 20180504

react 入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
    // const element=<h1>dfdf</h1>
    const element=(
        <div>
            <p>title</p>
            <p>content</p>
        </div>
    )
    function Welcome(props){
        // return <h1>hello,{props.name}</h1>
        return (
            <div>
              <h1>hello,{props.name}</h1>
              <h1>hello,{props.name}</h1>
            </div>
        )
    }
    const Welcome2=(props)=>{
      return <h1>hello,{props.name}</h1>
    }
    class Wel extends React.Component{  // 都大写
      render(){
        // return <h1>hi,{this.props.name}</h1>
        return (
            <div>
              <h1>hi,{this.props.name}</h1>
              <h1>fine,thank you</h1>
            </div>
        )
      }
    }
    ReactDOM.render(
      // <h1>Hello, !</h1>,  // 1
      // element,   // 2
      //   <Welcome name={'hehe'}/>,    // 函数式组件 3
      // <Welcome2 name={'xiaoming2'}/>,
        <Wel name={'how are you'}/>,  // 类组件 4
      document.getElementById('root')
  );
</script>
</body>
</html>

state 状态 componentDidMount componentWillUnmount

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
  class Wel extends React.Component {
    constructor (props) { // 构造函数
      super(props);
      this.state = {
        date: new Date(),
        isToggle:true
      }
      // 这个绑定是必要的，使`this`在回调中起作用
      this.handleClick=this.handleClick.bind(this)
 
    }
    handleClick(){
      this.setState((prevState)=>({   // 箭头函数多了一个 （）
        isToggle:!prevState.isToggle  // 修改上一次的 state 要传成函数
      }))
    }
    componentDidMount () {  // 生命周期 初始化时
      this.timeID = setInterval(() => {
        this.setState({   // 修改 state  默认传对象
          date: new Date()
        })
      }, 1000)
    }
 
    componentWillUnmount () {  // 页面卸载时
      clearInterval(this.timeID)
    }
 
    render () {
      return (
          <div>
            <h1>hi,{this.state.date.toLocaleTimeString()}</h1>
            <button onClick={this.handleClick}> {/*注释也要大括号   onClick 大写*/}
                {this.state.isToggle?'on':'off'}
            </button>
          </div>
      )
    }
  }
 
  ReactDOM.render(
      <Wel/>,
      document.getElementById('root')
  );
</script>
</body>
</html>

state demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
    //  其他都是函数式组件
  function Mes (props) {
    /*if (props.isToggle) {
      return <p>ok</p>
    }
    return <p>no</p>*/  //
 
    // return props.isToggle?<p>okok</p>:<p>nono</p>   // 2
    const imgs=['http://placekitten.com/200/198','http://placekitten.com/200/160']
    return (         //
        <div>
          <div>{props.isToggle?'okokok':'nonono'}</div>
          <img src={props.isToggle?imgs[0]:imgs[1]} alt=""/>
        </div>
    )
  }
    // 只有一个写成类组件
  class Wel extends React.Component {
    constructor (props) {
      super(props);
      this.state = {
        isToggle: true
      }
      this.handleClick = this.handleClick.bind(this)
    }
 
    handleClick () {
      this.setState((prevState) => ({
        isToggle: !prevState.isToggle
      }))
    }
 
    render () {
      return (
          <div>
            <button onClick={this.handleClick}>
              {this.state.isToggle ? 'on' : 'off'}
            </button>
            <Mes isToggle={this.state.isToggle}/>  {/*也可以不写成组件，直接丢进来*/}
          </div>
      )
    }
  }
 
  ReactDOM.render(
      <Wel/>,
      document.getElementById('root')
  );
</script>
</body>
</html>

表单双向数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
  class Wel extends React.Component {
    constructor (props){
      super(props)
      this.state={
        val:''
      }
      this.change=this.change.bind(this)
    }
    change(e){
      this.setState({
        val:e.target.value   // 使用e.target
      })
    }
    render () {
      return (
          <div>
             <p>双向数据绑定，太麻烦了，使用 onChange </p>
            <input type="text" value={this.state.val} onChange={this.change}/><br/>
            {this.state.val}
          </div>
      )
    }
  }
 
  ReactDOM.render(
      <Wel/>,
      document.getElementById('root')
  );
</script>
</body>
</html>

状态提升前，渲染多个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>状态提前前 渲染多个input </title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
  function solve (val) {
    if (val) {
      return parseInt(val) * 2
    }
  }
  class Wel extends React.Component {
    constructor (props) {
      super(props)
      this.state = {
        cel: '',
      }
      this.change = this.change.bind(this)
    }
 
    change (e) {
      this.setState({
        cel: e.target.value
      })
    }
 
    render () {
      const name=this.props.name
      return (
          <div>
            {name}: <input type="text" value={this.state.cel} onChange={this.change}/><br/>
            {solve(this.state.cel)}
            <p>{name} is {parseInt(this.state.cel) > 100 ? 'ok' : 'error'}</p>
 
          </div>
      )
    }
  }
 
  function All () {    // 渲染多个
    return (
        <div>
          <Wel name='one'/>
          <Wel name='two'/>
        </div>
    )
  }
 
  ReactDOM.render(
      <All/>,
      document.getElementById('root')
  );
 
</script>
</body>
</html>

状态提升，把父组件的state 通过 props 传给子组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>状态提升 </title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
  class Wel extends React.Component {
    constructor (props) {
      super(props)
      this.change = this.change.bind(this)
    }
 
    change (e) {
      this.props.celChange(e.target.value)  // 调父组件的方法 celChange,把值传过去  {/* 状态提升*/}
    }
 
    render () {
      const name = this.props.name
      return (
          <div>   {/* 状态提升 ，state 变成 props*/}
            {name}: <input type="text" value={this.props.cel} onChange={this.change}/><br/>
            {this.props.name}{this.props.cel}
            {<p>{name} is {parseInt(this.props.cel) > 100 ? 'ok' : 'error'}</p>}
          </div>
      )
    }
  }
 
  class All extends React.Component {
    constructor (props) {
      super(props);
      this.state = {    // 父组件有 state
        one: '',
        two: ''
      }
      this.oneFn = this.oneFn.bind(this)
      this.twoFn = this.twoFn.bind(this)
    }
 
    oneFn (val) {  // 接收传过来的值
      this.setState({
        one: val
      })
    }
 
    twoFn (val) {
      this.setState({
        two: val
      })
    }
 
    render () {
      return (
          <div>
            <Wel name='one' celChange={this.oneFn} cel={this.state.one}/>    {/* 把状态 通过 props 传给组件*/}
            <Wel name='two' celChange={this.twoFn} cel={this.state.two}/>
            {this.state.one && this.state.two && 'this result is: ' + [parseInt(this.state.one) + parseInt(this.state.two)]}
          </div>
      )
    }
  }
 
  ReactDOM.render(
      <All/>,
      document.getElementById('root')
  );
 
</script>
</body>
</html>

react

react
npx create-react-app my-app
 
npm run eject  暴露webpack配置，默认隐藏
 
npm i -g serve
serve -s build  // 静态服务器，打包后使用
 
函数式组件
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
 
类组件  【类允许我们在其中添加本地状态(state)和生命周期钩子】
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
 
=== 函数式组件 使用
function Welcome(props) {   // 组件名 W 大名
  return <h1>Hello, {props.name}</h1>;
}
 
const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);
======= end =======
 
在 JavaScript 中， true && expression 总是会评估为 expression ，而 false && expression 总是执行为 false 。

react 20180504的更多相关文章

react组件的生命周期
写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...
十分钟介绍mobx与react
原文地址:https://mobxjs.github.io/mobx/getting-started.html 写在前面:本人英语水平有限,主要是写给自己看的,若有哪位同学看到了有问题的地方,请为我指 ...
RxJS + Redux + React = Amazing!（译一）
今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...
React 入门教程
React 起源于Facebook内部项目,是一个用来构建用户界面的 javascript 库,相当于MVC架构中的V层框架,与市面上其他框架不同的是,React 把每一个组件当成了一个状态机,组件内 ...
通往全栈工程师的捷径 —— react
腾讯Bugly特约作者: 左明首先,我们来看看 React 在世界范围的热度趋势,下图是关键词“房价”和 “React” 在 Google Trends 上的搜索量对比,蓝色的是 React,红色的 ...
2017-1-5 天气雨 React 学习笔记
官方example 中basic-click-counter <script type="text/babel"> var Counter = React.create ...
RxJS + Redux + React = Amazing!（译二）
今天,我将Youtube上的<RxJS + Redux + React = Amazing!>的后半部分翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: ht ...
React在开发中的常用结构以及功能详解
一.React什么算法,什么虚拟DOM,什么核心内容网上一大堆,请自行google. 但是能把算法说清楚,虚拟DOM说清楚的聊聊无几.对开发又没卵用,还不如来点干货看看咋用. 二.结构如下: impo ...
React的使用与JSX的转换
前置技能:Chrome浏览器一.拿糖:React的使用 React v0.14 RC 发布,主要更新项目: 两个包: React 和 React DOM DOM node refs 无状态的功能 ...

随机推荐

Kickstart 和 Cobbler ks.cfg文件详解
ks.cfg文件组成大致分为3段命令段键盘类型,语言,安装方式等系统的配置,有必选项和可选项,如果缺少某项必选项,安装时会中断并提示用户选择此项的选项软件包段 %packages @groupn ...
Spring MVC 使用介绍（六）—— 注解式控制器（二）：请求映射与参数绑定
一.概述注解式控制器支持: 请求的映射和限定参数的自动绑定参数的注解绑定二.请求的映射和限定 http请求信息包含六部分信息: ①请求方法: ②URL: ③协议及版本: ④请求头信息(包括Co ...
AVL树探秘
本文首发于我的公众号 Linux云计算网络(id: cloud_dev) ,专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. 一.AV ...
【LOJ6060】【2017 山东一轮集训 Day1 / SDWC2018 Day1】Set 线性基
题目大意给出 \(n\) 个非负整数,将数划分成两个集合,记为一号集合和二号集合.\(x_1\) 为一号集合中所有数的异或和,\(x_2\) 为二号集合中所有数的异或和.在最大化 \(x_1 + x ...
【CF1151E】Number of Components
[CF1151E]Number of Components 题面 CF 题解联通块个数=点数-边数. 然后把边全部挂在较小的权值上. 考虑从小往大枚举左端点,等价于每次删掉一个元素,那么删去点数,加 ...
[Ynoi2018]五彩斑斓的世界
题目描述二阶堂真红给了你一个长为n的序列a,有m次操作 1.把区间[l,r]中大于x的数减去x 2.查询区间[l,r]中x的出现次数题解做YNOI真**爽... 我们发现这道题的操作非常诡异,把 ...
「LibreOJ NOI Round #1」验题
麻烦的动态DP写了2天简化题意:给树,求比给定独立集字典序大k的独立集是哪一个主要思路: k排名都是类似二分的按位确定过程. 字典序比较本质是LCP下一位,故枚举LCP,看多出来了多少个独立集,然 ...
(转)如何阅读OpenStack源码
1 关于该项目本项目使用在线绘图工具web sequencediagrams完成,目标是图形化OpenStack的所有操作流程,通过操作序列图能快速学习Openstack的工作原理,理清各个组件的关 ...
Entity Framework入门教程（17)---记录和拦截数据库命令
记录和拦截数据库命令这一节介绍EF6怎么记录和拦截发送给数据库的查询和操作命令. 1.记录EF发送给数据库命令(DbContext.Database.Log) 以前给了查看EF发送给数据库的命令我们 ...
WPF布局的应用
一写在开头1.1 本文内容本文主要内容是使用WPF来实现几个简单的界面. 二登录窗口小例子2.1 实现代码XAML代码: <Window x:Class="LoginDialog. ...

react 20180504

react 20180504的更多相关文章

随机推荐

热门专题