React入门

箭头函数与普通函数区别

   箭头函数:()=>{}没有自己的this,它使用的this是其外部环境的this
    普通函数：function() {}，有自己的this，它的this是在运行时指定的，可通过call,apply,bind去改变

 call和apply在传参形式上不同
 bind与call和apply不同之处在返回值不同，bind是直接返回函数本身，后面再加一个小括号才表示调用，而call和apply是直接执行

React:
React 起源于 Facebook ,诞生说2013,4
React主要用于构建UI。你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。
特点：
1.声明式设计：React采用声明范式，可以轻松描述应用。
2.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。
3.灵活：React可以与已知的库或框架很好地配合。

React:核心文件
React-DOM：是将虚拟DOM最终构建成真实DOM，并最终渲染到页面上的技术

建议使用：vs code

一、安装React
1.第一种安装，用script引入方式（不推荐）
<script src="https://unpkg.com/react@16.4.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.4.2/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>

<script>

function Header() {

    return <div>我是头部</div>
}

//ReactDOM.render(要渲染的内容,要渲染到哪里);

 ReactDOM.render(<Header />,document.getElementById('app'));

</script>

如果安装npm慢，换成淘宝镜像
npm的镜像替换成淘宝
1.得到原本的镜像地址

npm get registry

https://registry.npmjs.org/

设成淘宝的

npm config set registry http://registry.npm.taobao.org/

2.用create-react-app脚手架搭建项目

 npm install create-react-app -g

 create-react-app  项目名

jsx 标签快速添加语法：
解决
这个其实vs code是支持的，只是默认设置不支持，需要手动设置一下，设置步骤：

点击左下角“设置”
搜emmet
设置如下属性
"emmet.triggerExpansionOnTab": true

3. 定义一个react组件：

1.函数组件

 function Header () {
     return <div>1603A</div>
}

ReactDOM.render(<Header />, document.getElementById('app'));

2.类组件：

import React,{Component} from 'react';

  class  类名  extends  React.Component
      {

    render() {

              return (<div></div>);

        }

    }

例如：

        class HeaderCom extends Component {
        
             render() {
        
                 return (
        
                    <div>头部组件111</div>
                 );
                
             }
        
        }
           

注意：
       render方法中的return 根标签只能有一个 

4.为组件添加样式

1.引入css样式文件

  例如：     import './index.css'

2.js对象方式引入样式

例如：

import Styles from './indexStyle'

<div className="ft" style={  Styles.ft }>底部footer组件</div>

合并对象： Object.assign(Styles.ft,Styles.txt)

5. 遍历 主要用数组map方法

   例如：

           arr.map((item,index)=>{
                       return (
                                   <li 
                                       className="lis"
                                       key={item.id}
                                   >
                                        <p>品牌：{ item.name }</p>
                                        <p>价格：{ item.price }</p>
                                   </li>
                               
                           );
   
                   })
   
                 }
   

注意：遍历时要给遍历的元素添加key属性，否则会报警告

6.显示隐藏 主要利用js的三目运算符实现

格式：  条件 ? 满足 : 不满足

例如： { flag ? good : bad }

7.如何绑定事件

     <标签名 onClick={ this.函数名.bind(this) }>内容</标签名>

例如：

     <button onClick={ this.changeShowHide.bind(this) }>切换显示和隐藏</button>

es6编写reactjs事件处理函数绑定this三种方式：
https://www.cnblogs.com/feiying100/p/6649611.html

8.如何设置初始值

 constructor() {
    super();
    //相当于vue中的data   Vue({ data:{  } })
    this.state={
        属性1:值1，
        属性2:值2
        .....
    }
}


访问值：this.state.属性名

9. 如何同步数据到视图（页面）上

 this.setState({
      要改的属性：值
})