React 构建开发环境

1.先打开 cmd 命令行全局安装 react
npm install -g create-react-app
2.在你要安装的文件夹下面 git Bash Here,创建 hello-world 项目
create-react-app hello-world

image.png

image.png

1.React 简介

1.React起源于 facebook 的内部项目，因为该公司对市场上所有的 JavaScript MVC 框架都不满意，就决定自己写一套，用来架设 instagram 的网站，做出来以后发现这套东西很好用，就在2013年5月开源了。
2.React 把用户界面抽象成一个个组件 如 按钮组件 Button，对话框组件 Dialog 。开发者通过组合这些组件，最终得到功能丰富，可交互的页面。通过引入JSX 语法 复用组件变得非常容易，同时也能保证组件结构清晰。

2.虚拟DOM

DOM 操作非常昂贵，我们都知道在前段开发中，性能消耗最大的就 DOM 操作，而且这部分代码会让整体项目的代码变得难以维护，react 把真实的 Dom 树转化成 JavaScript 对象树，也就是虚拟 Dom 。

image.png

虚拟 DOM 由于是 js 变量，所以它的操作效率是非常高的。App可以 n 次操作虚拟 DOM ,虚拟 DOM 一次性反映到真实 DOM 里。这样就把过去 n 操作 Dom 简化为一次 DOM 操作。从而尽大可能的提高了整个页面的刷新效率。避免了性能的浪费。

3.JSX 语法

1.基本语法

定义标签时只允许被一个标签包裹。
标签一定要闭合

image.png

2.元素类型

小写首字母对应 DOM 元素
大写首字母对应 组件元素
注释使用 js 注释方法

3.元素属性

class 属性改为 className
for 属性改为 htmlFor
Boolean 属性：默认值为 true

4.JavaScript 表达式

属性值要使用表达式，只要用 { } 替换 “ ” 即可。

5.组件的使用

1.定义组件

image.png

2.显示 Hello 组件

image.png

3.组合使用组件

image.png

4.调用属性

class TOdoList extends Component{
  render(){
    return(
      <div>
        <h2>{this.props.title}</h2> //调用组件值
        <input type="text" /><br/>
          <ul>
            <li>第一个TODO</li>
            <li>第二个TODO</li>
            <li>第三个TODO</li>
            <li>第四个TODO</li>
          </ul>
      </div>
    )
  }
}

class App extends Component {
  render() {
    return (
    <div>
          <TOdoList title="TOdoList测试标题"/>  // 引用组件，设置值
    </div>
    )
  };
}

6.状态-state

react 里只需要更新组件 state ，然后根据新的 state 重新渲染用户界面（不用操作 DOM）

1.重要的方法

• getlnitialState：定义初始状态 （ES6 中已不再使用，改成在 constructor 中设定 ）
• this.state:读取状态
• this.setState :更新组件的状态

class TOdoList extends Component{
  constructor(){                                                  //构造器
    super();                                                        //执行父类的构造器
    this.state={                                                   //设置初始state
      list:["第一个","美美哒","就是我"]
    }
  }
  render(){
    return(
      <div>
        <h2>{this.props.title}</h2>
        <input type="text" /><br/>
          <ul>
           {                                                          //读取state
             this.state.list.map((item,index)=>{
                return <li key={item}>{item}</li>
             })
           }
          </ul>
      </div>
    )
  }
}

7.事件绑定

1.事件 —— 使用发生在组件上的事件
事件绑定写法 onClick，注意：必须写成驼峰形式，即事件的首字母要大写。
2.得到在浏览器上显示的元素 - refs

class TOdoList extends Component{
  constructor(){       //构造器
    super();           //执行父类的构造器
    this.state={       //设置初始state
      list:["第一个","美美哒","就是我"]
    }
    //推荐这种指针修正方式
    this.addTOdo=this.addTOdo.bind(this);
  }
  addTOdo (){   //点击的方法
    console.log(this.refs.todoval.value);
    this.state.list.push(this.refs.todoval.value) //将输入框的 value 值 push 到 list 数组中
    this.setState({     //更新页面
     list:this.state.list
   })  
  }
  render(){
    return(
      <div>
        <h2>{this.props.title}</h2>
        <input type="text" ref="todoval" />
        <button onClick={this.addTOdo}>ADD TODO</button>  //绑定点击事件
        <br/>
          <ul>
           {   //读取state
             this.state.list.map((item,index)=>{
                return <li key={item}>{item}</li>
             })
           }
          </ul>
      </div>
    )
  }
}

8.子组件向父组件传值

• 在父组件中定义一个设置state的方法，然后把这个方法通过属性传递给子组件。
• 在子组件中调用这个方法，把值传入就可以了。

class TOdoList extends Component {  //子组件
  constructor() {       //构造器
    super();           //执行父类的构造器
    this.state = {       //设置初始state
      list: ["第一个", "美美哒", "就是我"]
    }
    //推荐这种指针修正方式
    this.addTOdo = this.addTOdo.bind(this);
  }
  addTOdo() {
    console.log(this.refs.todoval.value);
    this.state.list.push(this.refs.todoval.value) //将输入框的value值push到list数组中
    this.setState({     //更新页面
      list: this.state.list
    })
  }
  render() {
    return (
      <div>
        <h2>{this.props.title}</h2>
        <input type="text" ref="todoval" />
        <button onClick={this.addTOdo}>ADD TODO</button>
        <button onClick={() => { this.props.sendDatefromchild("这是来自于子组件的问候") }}>子到父</button>  // 调用 sendDatefromchild 方法并传参
        <br />
        <ul>
          {   //读取state
            this.state.list.map((item, index) => {
              return <li key={item}>{item}</li>
            })
          }
        </ul>
      </div>
    )
  }
}

class App extends Component {  //父组件
  constructor() {
    super();
    this.sendDatefromchild = this.sendDatefromchild.bind(this);  //绑定 sendDatefromchild 方法
    this.state = {                 //初始化state
      message: "hello world"
    }
  }

  sendDatefromchild(val) {  //sendDatefromchild 方法
    this.setState({                //页面更新 message
      message: val
    })
  }

  render() {
    return (
      <div>
        <h1>{this.state.message}</h1>
        <TOdoList title="TOdoList测试标题" sendDatefromchild={this.sendDatefromchild} />   //把方法 sendDatefromchild 通过属性传给子组件
      </div>
    )
  };
}