36.React基础介绍——2019年12月24日 1.jsx语法介绍 2.react介绍 3.组件和属性 4.状态（state） 5.绑定事件 6.列表渲染 7.表单数据绑定 8. refs
2019年12月24日16:47:12
2019年10月25日11:24:29
主要介绍react入门知识。
1.1 介绍
jsx语法是一种类似于html标签的语法，它的作用相当于是让我们在JavaScript代码中直接写html代码，但是jsx不完全是html，它是 JavaScrip 的一种扩展语法，它具有 JavaScript 的全部能力，我们还可在jsx代码中插入变量或者表达式，用jsx语法写出来的语句是一个对象，我们可以将它存为一个变量，这个变量作为ReactDOM对象的render方法的第一个参数。
const element = <h1>Hello, world!</h1>;
1.2 基础使用
我们可以在以上代码中嵌套多个 HTML 标签，需要使用一个 div 元素包裹它，实例中的 p 元素添加了自定义属性 data-myattribute，添加自定义属性需要使用 data- 前缀。
ReactDOM.render(
<div>
<h1>菜鸟教程</h1>
<h2>欢迎学习 React</h2>
<p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
</div>
,
document.getElementById('example')
);
1.3 jacvascript表达式——{}
我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。实例如下：
ReactDOM.render(
<div>
<h1>{1+1}</h1>
</div>
,
document.getElementById('example')
);
1.4 conditional (三元运算)
在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代。以下实例中如果变量 i 等于 1 浏览器将输出 true, 如果修改 i 的值，则会输出 false.
ReactDOM.render(
<div>
<h1>{i == 1 ? 'True!' : 'False'}</h1>
</div>
,
document.getElementById('example')
);
1.5 内联样式
React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。以下实例演示了为 h1 元素添加 myStyle 内联样式：
var myStyle = {
fontSize: 100,
color: '#FF0000'
};
ReactDOM.render(
<h1 style = {myStyle}>菜鸟教程</h1>,
document.getElementById('example')
);
1.6 注释
注释需要写在花括号中，实例如下：
{/*注释...*/}
1.7 数组
JSX 允许在模板中插入数组，数组会自动展开所有成员：
var arr = [
<h1>菜鸟教程</h1>,
<h2>学的不仅是技术，更是梦想！</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
2.react介绍
2.1 介绍
React.js是前端三大新框架：Angular.js、React.js、Vue.js之一，这三大新框架的很多理念是相同的，但是也有各自的特点。
React起源于Facebook的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。
React可以作为一个js库来使用，我们在页面上引用相关的js文件，就可以使用它来做一些页面效果。
React也可以将界面拆分成一个个的组件，通过组件来构建界面，然后用自动化工具来生成单页面(SPA - single page application)应用系统。
2.2 React 特点
- 1.声明式设计 −React采用声明范式，可以轻松描述应用。
- 2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
- 3.灵活 −React可以与已知的库或框架很好地配合。
- 4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
- 5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
- 6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
官方文档：https://www.reactjscn.com/docs/hello-world.html
2.3 例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>菜鸟教程 React 实例</title>
<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>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<style>
.foo{
color:blue;
}
</style>
</head>
<body>
<div ></div>
<script type="text/babel">
const element = <h1 className="foo">Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root1'));
</script>
</body>
</html>
<script type="text/babel">
let iNum01 = 10;
let sTr = 'abc123456';
function fnRev(s){
return s.split('').reverse().join('');
}
let el = (
<div>
<h3>jsx语法</h3>
{/* 插入变量及运算 */}
<p>{ iNum01+5 }</p>
{/* 插入表达式 */}
<p>{ sTr.split('').reverse().join('') }</p>
{/* 插入函数调用 */}
<p>{ fnRev(sTr) }</p>
{/* 插入三元运算表达式 */}
<p>{ ok?'YES':'NO' }</p>
</div>
);
ReactDOM.render(
el,
document.getElementById('root')
)
</script>
2.4 必须引入脚本
<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>
//Babel来进行转换
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js">
</script>
注意:
由于 JSX 就是 JavaScript，一些标识符像
class和for不建议作为 XML 属性名。作为替代，React DOM 使用className和htmlFor来做对应的属性。
2.5 独立文件——阅读清晰
React JSX 代码可以放在一个独立文件上，例如我们创建一个 helloworld_react.js 文件，代码如下：
//helloworld_react.js
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
然后在 HTML 文件中引入该 JS 文件：
//index.html
<body>
<div ></div>
<script type="text/babel" src="helloworld_react.js"></script>
</body>
3.组件和属性
组件可以理解成是一个组成页面的部件或者零件，每个部件都有自己完整的结构和功能，多个部件拼装在一起就可以组成一个页面，从组件的实现来看，组件最终是要返回一个jsx对象，不过它和jsx对象的区别是，它在jsx对象的基础上，还带有自己的方法和属性，能完成它自己的交互功能。
组件有两种定义方式：一种是函数式定义，一种是类定义。
3.1 函数式定义组件
通过函数来定义一个组件，组件名称首字母要大写，函数接收一个参数props，返回一个jsx对象。其中，name属性是在渲染组件时，通过定义属性传入进来的。
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
注意，在添加属性时， class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。
3.2 类方式定义组件
上面的组件可以通过下面ES6的类的方式定义，定义的类都要继承于React对象中的Component类，这个定义的组件和上面的功能是等效的。
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
3.3 组件渲染
组件渲染和jsx对象一样，我们可以通过ReactDOM.render()方法来渲染组件。
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
3.4 组件组合
可以在一个组件内，拼装其他的组件，从而组合成一个更大的组件
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
4.状态（state）
React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。
以下实例创建一个名称扩展为 React.Component 的 ES6 类，在 render() 方法中使用 this.state 来修改当前的时间。
添加一个类构造函数来初始化状态 this.state，类组件应始终使用 props 调用基础构造函数。
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('example')
);
4.1 生命周期方法
生命周期方法，指的是在组件初始化后，以及组件销毁时，会自动执行的两个方法，我们可以在初始化方法中执行获取数据的操作，在组件销毁方法中执行一些清除操作，比如清除定时器等操作。
这两个方法分别是：componentDidMount 和 componentWillUnmount。
class Hello extends React.Component{
constructor(props){
super(props);
this.state = {}
}
// 组件初始化时自动执行的方法
componentDidMount() {
console.log('componentDidMount');
}
// 组件销毁时自动执行的方法
componentWillUnmount(){
console.log('componentWillUnmount');
}
render(){
return (
<h1>Hello world!</h1>
);
}
}
ReactDOM.render(<Hello />,document.getElementById('root'));
setTimeout(() => {
ReactDOM.render(<h1>切换组件</h1>,document.getElementById('root'));
}, 2000);
4.2 将生命周期方法添加到类中
在具有许多组件的应用程序中，在销毁时释放组件所占用的资源非常重要。
每当 Clock 组件第一次加载到 DOM 中的时候，我们都想生成定时器，这在 React 中被称为挂载。
同样，每当 Clock 生成的这个 DOM 被移除的时候，我们也会想要清除定时器，这在 React 中被称为卸载。
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({
date: new Date()
});
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('example')
);
实例解析：
在组件输出到 DOM 后会执行 componentDidMount() 钩子，我们就可以在这个钩子上设置一个定时器。
this.timerID 为定时器的 ID，我们可以在 componentWillUnmount() 钩子中卸载定时器。
代码执行顺序：
- 当被传递给
ReactDOM.render()时，React 调用Clock组件的构造函数。 由于Clock需要显示当前时间，所以使用包含当前时间的对象来初始化this.state。 我们稍后会更新此状态。 - React 然后调用
Clock组件的render()方法。这是 React 了解屏幕上应该显示什么内容，然后 React 更新 DOM 以匹配Clock的渲染输出。 - 当
Clock的输出插入到 DOM 中时，React 调用componentDidMount()生命周期钩子。 在其中，Clock组件要求浏览器设置一个定时器，每秒钟调用一次tick()。 - 浏览器每秒钟调用
tick()方法。 在其中，Clock组件通过使用包含当前时间的对象调用setState()来调度UI更新。 通过调用setState()，React 知道状态已经改变，并再次调用render()方法来确定屏幕上应当显示什么。 这一次，render()方法中的this.state.date将不同，所以渲染输出将包含更新的时间，并相应地更新 DOM。 - 一旦
Clock组件被从 DOM 中移除，React 会调用componentWillUnmount()这个钩子函数，定时器也就会被清除。
4.3 ES6函数
()=>this.tick() 是 ES6 中声明函数的一种方式，叫做箭头函数表达式，引入箭头函数有两个方面的作用：更简短的函数并且不绑定 this。
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
var f = ([参数]) => 表达式（单一）
// 等价于以下写法
var f = function([参数]){
return 表达式;
}
箭头函数的基本语法如下：
(参数1, 参数2, …, 参数N) => { 函数声明 }
(参数1, 参数2, …, 参数N) => 表达式（单一）
//相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }
// 当只有一个参数时，圆括号是可选的：
(单一参数) => {函数声明}
单一参数 => {函数声明}
// 没有参数的函数应该写成一对圆括号。
() => {函数声明}
5.绑定事件
5.1 介绍
React绑定事件和JavaScript中的行间事件类似，事件绑定是写在标签中的，但是，React事件是在原生事件的基础上做了封装，它的事件使用驼峰命名，而不是全部小写。事件需要传递一个函数作为事件处理程序，这个函数在哪里定义呢？我们可以通过类定义组件，将这个函数作为一个方法定义在组件中。
5.2 设计onclick()
定义一个点击能弹出名称的组件：
class Helloname extends React.Component {
fnHello(){
alert('Hello,Tom');
}
render(){
return (
<input type="button" value="打招呼" onClick={this.fnHello} />
)
}
}
ReactDOM.render(<Helloname />, document.getElementById('root'));
5.3 传递参数
如果想把这个组件定义成可以传递名称参数的，可以定义如下：
class Helloname extends React.Component {
fnHello(){
alert(this.props.name);
}
render(){
return (
<input type="button" value="打招呼" onClick={this.fnHello.bind(this)} />
)
}
}
ReactDOM.render(<Helloname name="Tom" />, document.getElementById('root'));
需要注意的是，按钮在调用方法时，此时的this默认会指向这个按钮，所以在绑定事件时，需要绑定this，将this指向当前对象。
6.列表渲染
6.1 列表渲染
如何拼装数组中的数据放入页面呢？可以将数组中的数据通过数组遍历渲染成一个jsx对象，在通过React渲染这个对象就可以了。
使用 map() 方法遍历数组生成了一个 1 到 5 的数字列表:
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((numbers) =>
<li>{numbers}</li>
);
ReactDOM.render(
<ul>{listItems}</ul>,
document.getElementById('example')
);
我们可以将以上实例重构成一个组件，组件接收数组参数，每个列表元素分配一个 key，不然会出现警告 a key should be provided for list items，意思就是需要包含 key：
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
return (
<ul>{listItems}</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('example')
);
6.2 keys
Keys 可以在 DOM 中的某些元素被增加或删除的时候帮助 React 识别哪些元素发生了变化。因此你应当给数组中的每一个元素赋予一个确定的标识。
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
一个元素的 key 最好是这个元素在列表中拥有的一个独一无二的字符串。通常，我们使用来自数据的 id 作为元素的 key:
const todoItems = todos.map((todo) =>
<li key={todo.id}>
{todo.text}
</li>
);
当元素没有确定的 id 时，你可以使用他的序列号索引 index 作为 key：
const todoItems = todos.map((todo, index) =>
// 只有在没有确定的 id 时使用
<li key={index}>
{todo.text}
</li>
);
let aList = ['红海','复联3','碟中谍6','熊出没'];
let el = aList.map((item,i)=>
<li key={i}>{ item }</li>
);
ReactDOM.render(
<ul>{el}</ul>,
document.getElementById('root')
);
通过map方法遍历数组中的成员，map方法的第二个参数是数组中的索引值，在循环生成li结构时，需要给每个li加上一个key，这个key的值可以用数组中的成员索引值。
7.表单数据绑定
7.1 表单数据绑定
表单元件对应着数据，而且这些数据都是变化的，所以我们会将表单元件的数据对应于组件中的state属性值，让它们之间的值实现双向数据绑定的效果，要实现这个效果，需要在表单元件上绑定onchange事件，来将state中的值改变为表单元件中的值，同时也需要将表单的value属性值，设置为等于state中的属性值。
表单数据绑定示例：
class Myform extends React.Component {
constructor(props){
super(props);
this.state = {
uname:''
};
}
// ev指的是系统自动产生的事件对象
// ev.target指的是发生事件的元素
fnNameInput(ev){
this.setState({
uname:ev.target.value
})
}
render(){
return(
<form>
<p>用户的名称是：{ this.state.uname }</p>
<input type="text" value={this.state.uname} onChange={this.fnNameInput.bind(this)} />
</form>
);
}
}
ReactDOM.render(
<Myform />,
document.getElementById('root')
);
8. refs
8.1 介绍
React 支持一种非常特殊的属性 Ref ，你可以用来绑定到 render() 输出的任何组件上。
这个特殊的属性允许你引用 render() 返回的相应的支撑实例（ backing instance ）。这样就可以确保在任何时间总是拿到正确的实例。
8.2 使用方法
绑定一个 ref 属性到 render 的返回值上：
<input ref="myInput" />
在其它代码中，通过 this.refs 获取支撑实例:
var input = this.refs.myInput;
var inputValue = input.value;
var inputRect = input.getBoundingClientRect();
你可以通过使用 this 来获取当前 React 组件，或使用 ref 来获取组件的引用，实例如下：
class MyComponent extends React.Component {
handleClick() {
// 使用原生的 DOM API 获取焦点
this.refs.myInput.focus();
}
render() {
// 当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
return (
<div>
<input type="text" ref="myInput" />
<input
type="button"
value="点我输入框获取焦点"
onClick={this.handleClick.bind(this)}
/>
</div>
);
}
}
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
2019年10月25日14:22:14