React是用于构建用户界面的 JavaScript 库

特点

1.声明式设计 −React采用声明范式，可以轻松描述应用。
2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
3.灵活 −React可以与已知的库或框架很好地配合。
4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

React-搭建脚手架

安装 nodeJS
安装create-react-app

npm install -g create-react-app

启动项目

    cd myreact
    yarn start
    // npm run start

JSX语法

JSX 是一个看起来很像 html 的 JavaScript 语法扩展。

js和html混合

1. 只能有一个根节点

return (
  <div className="App">
    <h1>你好react</h1>
  </div>
);
// Classname="App" 就是根节点

)2. 可以执行javascript表达式 {}

{1+1}   
{i == 1 ? '对的!' : '错误的'}

)3. 类名class 变成 className

<div className="App">
 </div>

4. 行内样式 展开

var myStyle = {
  "font-size": "14px",
  "color": "#FF0000"
}
return (

  <div className="App">
    <h1 style={myStyle}>你好react</h1>
  </div>

);

5. 注释 {/* 注释 */}

6. 数组里面可以直接写html节点

var arr = [
  <h1>组件渲染</h1>,
  <h1>虚拟dom</h1>
]
return (
  <div className="App">
   {arr}
  </div>
);

条件渲染

{isLog?"欢迎回来":"请登录"}
//&&左右两边都为真，结果才为真  
{isLog&&"已登录"}

列表渲染

1.jsx 中的数组里面可以包含html Dom 结构，在jsx数组会自动展开

    let list = [react,vue,angular]
    list.map((item,index)=>{return(<div key="index">{item}</div>)})
    [<div key="0">react</div>,<div key="1">vue</div>,<div key="2">angular</div>,

表单绑定

<input value={this.state.msg}>
//双向
<input  value={this.state.msg} onChange={this.changeMsg.bind(this)}>

事件响应

• 1.需要驼峰写法

    onClick
    onFocus
  
  

• 2.执行

 onClick={this.showMsg}
//特别注意方法不要（）

• 3.改变事件响应函数的this指向（默认响应函数的this指的是当前dom元素）
  修改this指向

        onClick={this.addNum.bind(this)}
        onClick = {()=>{this.addNum(  )}}

state使用
组件的数据（状态）
定义

constructor(props){
    super(props);
    this.state = {name:"yaya"}
}

使用

    {this.state.name}

修改

this.setState({"yaya":"hsy"})
//在更新state 也会同时更新dom

props使用

定义 父传子的数据
定义过程

• 1.在调用组件得时候传入
  <Child age="20">
• 2.Child 组件得获取
  {this.props.age}
  特点
  只读，不可变
  默认
  Child.defaultProps={age:18} //默认props设置

子元素给父元素传递参数

核心思想 传入的props是一个函数

<child myfun ={this.changelt.bind(this)}>
//在child内部
<button onClick={this.props.myfun('数据')}>

数组相关方法

    map((item,index,self)=>{...}) //映射出一个新的数据组
    arr.indexOf(item)  ///查找数组所在的下标，找不到返回-1
    arr.splice(从多少，删除数量)
    arr.unshift()   //从前面添加内容
    arr.filter(item=>{...})   //过滤数组，如果回调函数返回true保留，false过滤

函数的bind方法

fun.bind(上下文this,参数执行参数A,参数B)

//执行fun 里面的this用第一个参数带代替，后面的参数A,B 为函数的参数