react文档学习记录

已经有一定基础，但是之前是囫囵吞枣，为了尽快上手应付hhhhh，所以现在是倒回头来再仔细看看，查漏补缺。

1、可以用 {花括号} 把任意的 JavaScript 表达式 嵌入到 JSX 中。
JSX是一个JS对象。
优势：
1、引用变量表达式。
2、在渲染之前, React DOM 会格式化 JSX 中的所有值。从而保证用户无法注入任何应用之外的代码。在被渲染之前，所有的数据都被转义成为了字符串处理。 以避免 XSS(跨站脚本) 攻击。（防止注入）

2、DOM更新（虚拟DOM）
默认情况下， 在渲染之前, React DOM 会格式化(escapes) JSX中的所有值. 从而保证用户无法注入任何应用之外的代码. 在被渲染之前，所有的数据都被转义成为了字符串处理。 以避免 XSS(跨站脚本) 攻击。

3、props：
所有 React 组件都必须是纯函数，并禁止修改其自身 props 。

当 React 遇到一个代表用户定义组件的元素时，它将 JSX 属性以一个单独对象的形式传递给相应的组件。 我们将其称为 “props” 对象。

props是只读的。

“纯函数”：因为它们不会试图改变它们的输入，并且对于同样的输入,始终可以得到相同的结果。

4、state状态
如何正确使用state：
① 不要直接修改 state(状态)

// 错误，这样将不会重新渲染一个组件：
this.state.comment = 'Hello';

正确是用 setState() 代替

②state(状态) 更新可能是异步的，所以想要对原本的state计算，不能直接传值，有两种方法。

1.1上图方法，传入函数作为参数。函数有两个参数值，一个是前state，一个是此组件属性值props.

this.setState((prevState, props) => {
            return {
                counter: prevState.counter+props.increment
            }
        });
this.setState(state=> {
            return {
                counter: state.counter
            }
        });

1.2回调函数

this.setState({
                counter: prevState.counter+props.increment
            },()=>{
            	//重定义一下counter和props值
            	//再加一下就好
            	//哎呀不适用这个例子，因为没有前后关系hhhhh，就当补充一下
            });

③state(状态)更新会被合并
当你调用 setState()， React 将合并你提供的对象到当前的状态中。
意思是只修改你要改的那个值，其他的不变。

5、数据向下流动（单向数据流）
通常称为一个“从上到下”，或者“单向”的数据流。任何 state(状态) 始终由某个特定组件所有，并且从该 state(状态) 导出的任何数据 或 UI 只能影响树中 “下方” 的组件。

如果把组件树想像为 props(属性) 的瀑布，所有组件的 state(状态) 就如同一个额外的水源汇入主流，且只能随着主流的方向向下流动。

6、事件处理程序
通过 JSX , 你传递一个函数作为事件处理程序

①阻止默认行为

7、合成事件（事件机制）
http://react.html.cn/docs/events.html
http://zhenhua-lee.github.io/react/react-event.html

React在设计事件机制的时候，利用冒泡原理充分提高事件绑定的效率，使用EventPluginHub对回调函数、事件插件进行管理，然后通过一个统一的入口函数实现事件的分发。

8、条件渲染：
①

function (props){
	// let xxx = props.xxx
	// if(){
	return(<></>)
}
}

②三元运算符
③&&

9、Form表单
select：
总的来说，这使 < input type=“text”>， < textarea> 和 < select> 都以类似的方式工作 —— 它们都接受一个 value 属性可以用来实现一个受控组件。

select通过接受的value数组来控制选择

官网例子：

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'coconut'};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

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

  handleSubmit(event) {
    alert('Your favorite flavor is: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Pick your favorite flavor:
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

10、File API(上传file)以后看
11、多个Input选择框，使用name来标识
当您需要处理多个受控的 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;
    const 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>
    );
  }
}

12、状态提升
简言之，就是：当两个子组件之间想要发生关系，就把他们都摘出来，要改变的那个数作为props，父组件状态提升。保持单一数据流原则

高级指南
1、可访问性
语义化的 HTML 是Web应用程序可访问性的基础。 使用各种HTML元素来加强我们网站中信息的含义，往往会使我们获得更好的可访问性。
Frangment

大佬说不用看这个，所以差不多了hhhhh