React——学习总结

简单开始例子

ReactDOM.render(                   //React DOM 得render方法
  <h1>Hello, world!</h1>,          //渲染到html DOM节点得react元素
  document.getElementById('root')  //获取html页面得DOM节点
);

JSX

JSX， 一种 JavaScript 的语法扩展React.createElement(component, props, ...children)得语法糖，所以需要先引用React变量。 我们推荐在 React 中使用 JSX 来描述用户界面。JSX 乍看起来可能比较像是模版语言，但事实上它完全是在 JavaScript 内部实现的。

1、JSX中使用JavaScript 表达式用大括号{}包起来;
2、if 或者 for 语句里使用 JSX，将它赋值给变量，当作参数传入，作为返回值都可以;
3、JSX 换行和缩进时，代码的外面扩上一个小括号，这样可以防止 分号自动插入 的 bug;
4、JSX 标签是闭合式的;
5、camelCase 小驼峰命名 来定义属性的名称 className,backGround;
6、所有的内容在渲染之前都被转换成了字符串,有效地防止 XSS(跨站脚本) 攻击;
7、注释语法：{/**/}
8、JSX 标签名不能为一个表达式，可以先赋值给一个变量。
9、没有给属性传值，它默认为 true

const element = (//换行用小括号括起来
  <div>
    <h1 className={aclass}>Hello!</h1> {/*属性用小驼峰命名方式，变量aclass用{}括起来*/}
    <h2>{2+2}</h2>                     {/*js表达式用{}括起来*/}
  </div>
);
//可以用点表示法来引用 React 组件
import React from 'react';
const MyComponents = {//一个模块包含多个组件。
  DatePicker: function DatePicker(props) {
    return <div>Imagine a {props.color} datepicker here.</div>;
  }
}

function BlueDatePicker(props) {

  return <MyComponents.DatePicker color="blue" checked />;//点表示法 checked 值为true
  //return <MyComponents[props.componentTtye] color="blue" />；错误：JSX 标签名不能为一个表达式
  //const componentType = MyComponents[props.componentTtye] ;return <componentType color="blue" />  //正确。
}

元素渲染

1、元素是构成 React 应用的最小单位；
2、大多数React应用只会调用一次 ReactDOM.render()；
3、React DOM 首先会比较元素内容先后的不同，而在渲染过程中只会更新改变了的部分；

组件 & Props

1、组件得含义与定义

组件可以将UI切分成一些的独立的、可复用的部件，从概念上看就像是函数，它可以接收任意的参数（称之为“props”），所有的React组件必须像纯函数那样使用它们的props（不可修改）。并返回一个需要在页面上展示的React元素

//函数定义组件
function Welcome(props) {//参数props
  return <h1>Hello, {props.name}</h1>;//返回react 元素
}
//ES6 class定义组件
class Welcome extends React.Component { //扩展ES6类React.Component
  render() {//render()函数体
    return <h1>Hello, {this.props.name}</h1>;
  }
}

当React遇到的元素是用户自定义的组件，它会将JSX属性作为单个对象（props）传递给该组件，这个对象称之为“props”。组件名首字母大写，使用该组件时必须定义或引入它。

function Welcome(props) {              //自定义组件
  return <h1>Hello, {props.name}</h1>;//props={name:"Sara"}
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,                            //元素为自定义组件Welcome
  document.getElementById('root')
);

2、组合组件

组件可以在它的输出中引用其它组件，React应用中，按钮、表单、对话框、整个屏幕的内容等，这些通常都被表示为组件。组件的返回值只能有一个根元素。

function App() {
  return (
    <div>{/*一个根元素*/}
      <Welcome name="Sara" />{/*引用自定义Welcome组件*/}
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

State & 生命周期

1、state

1、局部状态State：一个功能只适用于类定义组件；
2、构造函数（constructor）是唯一能够初始化 this.state 的地方；
3、应当使用 setState()更新局部状态，而不是直接更改this.state得值；
4、this.props 和 this.state 可能是异步更新，不能用他们来计算this.state得下一个值，应该用
setState回调函数得方式传入参数(prevState, props)，return一个对象；
6、当你调用 setState() 时，React 将你提供的对象合并到当前状态,更新其中一个(state.name)属性时，会将该属性合并到this.state对象中；
7、自顶向下或单向数据流，任何状态始终由某些特定组件所有，并且从该状态导出的任何数据或 UI 只能影响树中下方的组件

2、生命周期

挂载：组件加载到DOM中，
卸载：生成的DOM被移除。
生命周期钩子：componentWillUnmount()挂载前， componentDidMount()挂载后

class Clock extends React.Component {
  constructor(props) {                //基础构造函数
    super(props);                     //传递props
    this.state = {date: new Date()};  //唯一初始化this.state得地方
  }

  componentDidMount() {//react 元素添加到DOM中后
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {//react 元素即将从DOM中删除
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({  //更改state得值
      date: new Date()
    });
   /*回调函数得方式更改state得值
     this.setState((prevState, props) => ({
      date: prevState.date + 1
    }));*/
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>{/*每次state更新时调用render方法重新渲染值*/}
      </div>
    );
  }
}

ReactDOM.render(//初次调用render渲染clock组件到DOM中
  <Clock />,
  document.getElementById('root')
);

事件处理

1、React事件绑定属性的命名采用驼峰式写法，而不是小写；
2、如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM元素的写法)；
3、在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为。你必须明确的使用 e.preventDefault();
4、类的方法默认是不会绑定 this，没有在方法后面添加 ()，要为这个方法绑定 this，（构造函数中绑定，属性初始化器法， 箭头函数）， 箭头函数,如果这个回调函数作为一个属性值传入低阶组件，这些组件可能会进行额外的重新渲染。建议选用其他两种方法。
5、传参数：参数 e 作为 React 事件对象将会被作为第二个参数进行传递。通过箭头函数的方式，事件对象e必须显式的进行传递，但是通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。

class LoggingButton extends React.Component {
  // This syntax ensures `this` is bound within handleClick.
  // Warning: this is *experimental* syntax.
  handleClick = () => {//属性初始化器法绑定this
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}
class LoggingButton extends React.Component {
/*构造函数中绑定this
    constructor(props) {
        super(props);
        // This binding is necessary to make `this` work in the callback
        this.handleClick = this.handleClick.bind(this);
   }*/
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    // This syntax ensures `this` is bound within handleClick
    return (
      <button onClick={(e) => this.handleClick(e,id)}>{/*箭头函数方法，用构造函数中绑定this时可直接调用this.handleClick*/}
        Click me
      </button>
    );
  }
}

条件渲染

1、使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素 满足条件return元素；
2、声明一个变量用于存储元素，渲染组件得其中一部分元素；
3、与运算符 &&：用花括号包裹代码在 JSX 中嵌入任何表达式 ，也包括 JavaScript 的逻辑与 &&，JavaScript 中，true && expression 总是返回 expression，而 false && expression 总是返回 false，如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它；
4、三目运算符：condition ? true : false；
5、阻止组件渲染 ：render 方法返回 null，但是生命周期得方法依然可以回调；

function WarningBanner(props) {
  if (!props.warn) {
    return null;    //返回null不渲染元素
  }
 const a = <a>超链接</a>;//存储元素到变量
  if (props.warn == “a”) {//if条件句 return元素，tia'jian渲染
    return a;    
  }

  return (
    <div className="warning">
      Warning!
    </div>
  );
}

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showWarning: true}
    this.handleToggleClick = this.handleToggleClick.bind(this);
  }

  handleToggleClick() {
    this.setState(prevState => ({
      showWarning: !prevState.showWarning
    }));
  }

  render() {
    return (
      <div>
        <WarningBanner warn={this.state.showWarning} />
        <button onClick={this.handleToggleClick}>
          {this.state.showWarning ? 'Hide' : 'Show'}{/*三目运算符选择渲染文本*/}
        </button>
        {this.props.warn=="b" && <a>b超链接</a>} // &&条件渲染
      </div>
    );
  }
}

ReactDOM.render(
  <Page />,
  document.getElementById('root')
);

列表 & Keys

1、map()
2、当你创建一个元素时，必须包括一个特殊的 key 属性。key是唯一得标识,数据里面得id或索引index，key应该绑定在循环得组件上而不是DOM元素上key应该在数组的上下文中被指定；
3、两个不同的数组时，我们可以使用相同的键；
4、key会作为给React的提示，但不会传递给你的组件，传递给组件必须赋值在组件得属性上；
5、也可在JSX中使用map();

function ListItem(props) {
  // 对啦！这里不需要指定key:
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 又对啦！key应该在数组的上下文中被指定
    <ListItem key={number.toString()}
              value={number} />

  );
  return (
    <ul>
      {listItems}
      {numbers.map((number)=>
          <ListItem value={number} key={index}/> 
      )
      }
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

表单

1、受控组件（<input>,<textarea>, <select>）：每个状态的改变都有一个与之相关的处理函数，使react变成一种单一数据源的状态，表单值为state的属性值，更改时调用事件更改state值。通过传入一个value属性来实现对组件的控制；
2、<textarea>：value属性来text内容；
3、select 标签：用value值代表选中的内容；
4、处理多个受控的input元素时，可以通过给每个元素添加一个name属性，来让处理函数根据 event.target.name的值来选择做什么。

class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isGoing: true,
      numberOfGuests: 2
    };

    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value; //判断type
    const name = target.name;  //根据target.name来设定值。

    this.setState({
      [name]: value
    });
  }

  render() {
    return (
      <form>
        <label>
          Is going:
          <input
            name="isGoing"
            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          Number of guests:
          <input
            name="numberOfGuests"
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
        </label>
      </form>
    );
  }
}

状态提升

1、 通过将state数据提升至离需要这些数据的组件最近的父组件来完成的。这就是所谓的状态提升;
2、让组件“受控”，让组件收一个一个属性值为父组件得函数名。可在组件内调用该函数，该函数使用setState()；
3、在React应用中，对应任何可变数据理应只有一个单一“数据源”。通常，状态都是首先添加在需要渲染数据的组件中。此时，如果另一个组件也需要这些数据，你可以将数据提升至离它们最近的父组件中。你应该在应用中保持 自上而下的数据流，而不是尝试在不同组件中同步状态。

组合 vs 继承

1、React 具有强大的组合模型，我们建议使用组合而不是继承来复用组件之间的代码；
2、包含关系：不知道子组件是什么（Sidebar 或 Dialog），children（this.props.children） 属性将子元素直接传递到输出,该组件包含的其他元素即为children属性得值，或者将元素赋值给组件得自定义属性；
3、特殊实例：通过配置属性用较特殊的组件来渲染较通用的组件；

function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
      {props.children}
    </FancyBorder>
  );
}

class SignUpDialog extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleSignUp = this.handleSignUp.bind(this);
    this.state = {login: ''};
  }

  render() {
    return (
      <Dialog title="Mars Exploration Program"
              message="How should we refer to you?">
        <input value={this.state.login}
               onChange={this.handleChange} />

        <button onClick={this.handleSignUp}>
          Sign Me Up!
        </button>
      </Dialog>
    );
  }

  handleChange(e) {
    this.setState({login: e.target.value});
  }

  handleSignUp() {
    alert(`Welcome aboard, ${this.state.login}!`);
  }
}