前言
前置学习内容：
前端入门JS & DOM前端常见开发工具浅讲
一、React
1.React简介
由FaceBook在2013年开源的一个用于构建用户界面的JavaScript库，主要用于构建 UI，很多人认为 React 是 MVC 中的 V（视图）。
2.React能做什么
餐饮收银购物车一些小游戏
3.React的特点
声明式编码 −React采用声明范式，可以轻松描述应用。不直接操作DOM −React通过对DOM的模拟，最大限度地减少与DOM的交互。组件化思想 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。一次学习，多端开发 −React可以与已知的库或框架很好地配合。
二、React基础语法
1.引用方式
脚本引入方式：直接使用 Staticfile CDN 的 React CDN 库。（不建议在生成环境中使用，在浏览器中使用 Babel 来编译 JSX 效率是非常低的。）
<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8” />
<title>Hello React!</title>
<!–React库链接,下方–>
<script src=“https://cdn.staticfile.org/react/16.4.0/umd/react.development.js”></script>
<script src=“https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js”></script>
<!–React库链接,上方–>
<script src=“https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js”></script>
</head>
<body>
<div id=“example”></div>
</body>
<script type=“text/babel”>
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById(example)
);
</script>
</html>
react.min.js – React 的核心库react-dom.min.js – 提供与 DOM 相关的功能babel.min.js – Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。
Create-React-App:
是FaceBook的React团队官方出的一个构建react单页面应用的脚手架工具。
安装：npm install -g create-react-app
新建React项目：
create-react-app demo（项目名）npm install（安装依赖）或者 yarnnpm start（启动项目）或者 yarn start
目录结构：
demo/
README.md
node_modules/
package.json
.gitignore
public/
favicon.ico
index.html
manifest.json
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
manifest.json 指定了开始页面 index.html，一切的开始都从这里开始，所以这个是代码执行的源头。
src/index.js 是一个入口文件，我们可以直接修改 src/index.js 文件代码：
import React from react;
import ReactDOM from react-dom;
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById(example)
);
2.React JSX
React 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。我们不需要一定使用 JSX，但它有以下优点：
JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。它是类型安全的，在编译过程中就能发现错误。使用 JSX 编写模板更加简单快速。
JSX类似HTML，以下就是JSX语句：
const element = <h1 className=“title”>Hello, world!</h1>;
元素是构成 React 应用的最小单位，JSX 就是用来声明 React 当中的元素。
由于 JSX 就是 JavaScript，一些标识符像class和for不建议作为 XML 属性名。作为替代，React DOM 使用className和htmlFor来做对应的属性。
JSX中使用自定义属性需要在添加前缀data-，例如：
const element = <h1 className=“title” data–status=“true”>Hello, world!</h1>;
JSX可以直接写在js文件中，JSX中可以写入JavaScript表达式，需要用{}括起来，例如：
const helloWrold = “Hello，world！”
ReactDOM.renter(
<h1>{helloWrold}</h1>,
document.getElementById(example)
);
JSX中允许插入数组，例如：
const helloWrold = [
<p>Hello，world！</p>,
<p>React，world！</p>
];
ReactDOM.renter(
<div>{helloWrold}</div>
document.getElementById(example)
);
在 JSX 中不能使用if else语句，但可以使用conditional (三元运算)表达式来替代。
<h1>{i === 1 ? True! : False}</h1>
JSX注释使用{/*注释内容*/}
3.React样式
React样式支持多种导入方式：
1.外部文件导入
import “./index.css”;//import导入外部样式文件
优点：方便、简洁缺点：样式一经加载将全局生效，类名相同时样式之间会互相影响
2.内联样式
<p style={{color:red}}>Hello，world！</p>
优点：内联样式，样式之间不会有冲突，可以动态获取当前组件的state状态。缺点：写法上都需要使用驼峰标识，某些样式编辑器没有提示，大量使用这种样式, 代码会混乱，某些样式无法编写(比如伪类/伪元素)，性能上不太好，组件每次渲染都会创建新的对象。
3.声明式内联样式
const myCSS = {
color:red,
backgroundColor : blue;
};
ReactDOM.renter(
<p style={myCSS}>Hello，world！</p>,
document.getElementById(“example”);
);
优点：内联样式, 样式之间不会有冲突，性能上比直接在style中写入对象的好一点。缺点：写样式时编辑器没有提示，大量使用这种样式, 代码会混乱，某些样式无法编写(比如伪类/伪元素)。
4.CSS模块化
//index.css文件
.myP{
color:red;
background–color:blue;
}
.myDiv{
border:1px solid;
}
import styles from “./index.css”;
ReactDOM.renter(
<div style=“styles[myDiv]”>
<p style={styles.myCSS}>Hello，world！</p>
</div>,
document.getElementById(“example”);
);
优点：将css文件作为一个模块引入，这个模块中的所有css，只作用于当前组件。不会影响当前组件的后代组件。样式之间不会有冲突。缺点：所有的 className 都必须使用 {style.className} 的形式来编写不方便动态来修改某些样式，依然需要使用内联样式的方式。
4.React组件
所谓组件，即封装起来的具有独立功能的UI部件。我们可以使用函数定义了一个组件，也可以使用 ES6 class 来定义一个组件。
函数组件：
function HelloWorld(){
return <p>Hello World</p>;
}
class组件：
class HelloWorld extends React.Component{
renter(){
return <p>Hello World</p>;
}
}
组件的一些基础方法
1.setState
setState(object nextState[, function callback])
nextState，将要设置的新状态，该状态会和当前的state合并callback，可选参数，回调函数。该函数会在setState设置成功，且组件重新渲染后调用。
2.setProps
setProps(object nextProps[, function callback])
3.isMounted
返回值：true或false，表示组件是否已挂载到DOM中
5.React State
React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。
class Name extends React.Component{
constructor(props) {
super(props);
this.state = {names:[“小明”,“小红”,“李华”],index:0};
this.num = 0;
}
tick(num){
this.setState({…this.state,index:num});
console.log(this.state.index);
}
componentDidMount(){
this.timerID = setInterval(
() => this.tick(this.num=(this.num+1)%3),
1000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
render(){
return (
<div>
<p>{this.state.names[this.state.index]}</p>
</div>
);
}
}
ReactDOM.render(
<Name/>,
document.getElementById(“root”)
);
计算器每秒执行tick更新index值，且执行setState方法更新UI，移除DOM执行componentWillUnmount()卸载定时器。
componentDidMount() 与 componentWillUnmount() 方法被称作生命周期钩子。在组件输出到 DOM 后会执行 componentDidMount() 钩子，我们就可以在这个钩子上设置一个定时器。this.timerID 为定时器的 ID，我们可以在 componentWillUnmount() 钩子中卸载定时器。
6.React Props
state 和 props 的区别：props是不可变的，而 state 可以根据与用户交互来改变。
function Name(props){
return <div>
<p>{props.name}</p>
</div>
}
Name.defaultProps = {
name : “小红”
}
Name.propTypes = {
name: PropTypes.string
};
ReactDOM.render(
<Name name={“小明”}/>,
document.getElementById(“root”)
);
defaultProps可以用于设置props的默认值，当没有对props赋值就使用默认值。propTypes验证器，用于验证props是否是有效类型，若为无效类型，将会在控制台输出警告。
7.React元素渲染
元素渲染
元素是构成 React 应用的最小单位，它用于描述屏幕上输出的内容。要将React元素渲染到根DOM节点中，我们通过把它们都传递给ReactDOM.render()的方法来将其渲染到页面上。
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById(example)
);
更新渲染
React 元素都是不可变的。当元素被创建之后，你是无法改变其内容或属性的。目前更新界面的唯一办法是创建一个新的元素，然后将它传入 ReactDOM.render() 方法。
父组件使用State，子组件使用Props，每秒更新UI，设定Props默认值和验证器，综合2、3、4内容。
class Person extends React.Component{
constructor(props){
super(props);
this.state = {
names:[“小明”,“小红”,“李华”],
homes:[“广场”,“公园”,“学校”],
index:0
};
}
tick(num){
this.setState({…this.setState,index:num%3});
}
componentDidMount(){
this.timerID = setInterval(
() => this.tick(this.state.index+1),
1000);
}
componentWillUnmount(){
clearInterval(THIS.timerID);
}
render(){
return <div>
<Name name={this.state.names[this.state.index]}/>
<span>住在</span>
<Home home={this.state.homes[this.state.index]}/>
</div>
}
}
class Name extends React.Component{
render(){
return <span>{this.props.name}</span>
}
}
Name.defaultProps={
name:“xx”
}
Name.propTypes={
name:PropTypes.string
}
class Home extends React.Component{
render(){
return <span>{this.props.home}</span>
}
}
Home.defaultProps = {
home:“xx”
}
Home.propTypes = {
home:PropTypes.string
}
ReactDOM.render(
<Person />,
document.getElementById(“root”)
);
8.React 数组与列表
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((numbers) =>
<li>{numbers}</li>
);
ReactDOM.render(
<ul>{listItems}</ul>,
document.getElementById(example)
);
9.React 事件处理
React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同:
React 事件绑定属性的命名采用驼峰式写法，而不是小写。如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)
事件处理格式如下：
<button onClick={activateLasers}>
激活按钮
</button>
10.React表单与事件
class Input extends React.Component{
constructor(porps){
super(porps);
this.state = {value:“请输入”};
this.inputChange = this.inputChange.bind(this);
}
inputChange(e){
this.setState({value:e.target.value});
}
render(){
let value = this.state.value;
return (
<div>
<p style={{
fontSize : 30,
fontWeight : 800
}}>{this.state.value}</p>
<input value={value} onChange={this.inputChange}/>
</div>
);
}
}
ReactDOM.render(
<Input />,
document.getElementById(“root”)
);
注意：this.inputChange =this.inputChange.bind(this);这一步十分重要，手动绑定this。当执行onChange事件时这里面的this不再是原来的this导致this.setState报错，将this进行手动绑定后将解决这个问题。
附录
进阶学习内容：
前端学习内容
参考文献
菜鸟教程React中引入样式的5种方式（代码举例 & 优缺点）
小四
扫码下载安卓APP
微信扫一扫关注我们
微信扫一扫打开小程序
手Q扫一扫打开小程序
发表评论