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
设成淘宝的
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
- 定义一个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)
-
遍历 主要用数组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.属性名
- 如何同步数据到视图（页面）上
this.setState({
要改的属性：值
})
