React--官方文档学习

一、在组件中写style的样式表

需要将样式单独提出，并定义一个变量，然后调用

const style01 = {
  display:'block'
};

<i style={style01}>

二、JSX和Dom属性

const element = <div tabIndex="0"></div>;
const element = <img src={user.avatarUrl}></img>;

JSX语法中，为Dom元素添加属性时：
1、如果属性值是String，则用引号引起来。
2、如果属性值是JS表达式，则用 单花括号{ }括起来。

三、State & 生命周期

1、this.setState()

this.setState( Object | Function(prevState, props) )
因为 this.state和 this.props的更新是异步的，所以不能依赖他俩来计算更新state。

//错误写法：依赖this.state 和 this.props来直接改变state。
this.setState({
  counter: this.state.counter + this.props.increment,
});
// 正确写法：依赖函数传递当前的state和props来改变state
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

四、事件处理

1、与传统DOM元素的区别

React事件绑定属性的命名采用驼峰式写法，而不是小写。
如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM元素的写法)

# 例子：
<button onClick={activateLasers}>
  Activate Lasers
</button>

2、阻止默认事件

在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为。你必须明确的使用 preventDefault。

# 传统JS，return false  来阻止默认行为。
<a href="#" onclick="console.log('The link was clicked.'); return false">
  Click me
</a>

# React 写法
function ActionLink() {
  function handleClick(e) {
    e.preventDefault();  // 阻止默认事件
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

3、JSX 回调函数中 this 的问题

1）、默认你需要使用bind 在constructor(){}，对函数进行this的绑定

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: 'Diana' };
    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);  // 在constructor中进行this绑定
  }
  handleClick() {
    console.log(this.state.name);
  }
  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

2）、你还可以这么写

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: 'Diana' };
  }
  /**
   *  这种写法可以不用 绑定 this，不过这属于 实验写法。需要配合：
   *  @babel/plugin-proposal-class-properties 包 来使用。
   *  在 .babelrc 中配置：
   *    {
          "plugins": ["@babel/plugin-proposal-class-properties"]
        }
   */
  handleClick = () => {
    console.log(this.state.name);
  }
  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

3）、可以直接在回调函数中使用箭头函数。 不建议这么写

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    return (
      // 为handleClick函数绑定了this。
      <button onClick={
          (e) => this.handleClick(e)
        }
      >
        Click me
      </button>
    );
  }
}

但是这样有一个问题：就是这个组件每次被渲染的时候onClick 的回调函数都会被重新渲染，从而导致性能问题，所以不建议这么写。

4、回调函数传参

 /**
   *  1、通过 bind(this,params,..)方法， evenet 永远被默认放在形参的最后一个
   */
  handleClick3 (name, sex, e) {
    console.log(e);
    alert(`${name} + ${sex}`);
  }
  <button onClick={this.handleClick3.bind(this, this.state.name, this.state.sex)}>
     点我点我！
  </button>

  /**
   *  2、通过 箭头函数方法， evenet 可以被显式传递，随便放那个位置都行
   */
  handleClick4 (e, name, sex) {
    console.log(e);
    alert(`${name} + ${sex}`);
  }
  <button onClick={ (e) => this.handleClick4(e, this.state.name, this.state.sex)  } >
     你点我试试！！
  </button>

五、条件渲染

六、列表 & Keys

1、Keys

注意key的重要性，便于React识别哪些元素发生了变化。
如果列表可以重新排序，我们不建议使用索引来进行排序，因为这会导致渲染变得很慢。

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('root')
);

2、DOM 元素 li 升级成 <Li /> 组件后的key问题

如果把DOM元素抽象成 React组件后，就不能再原来的DOM元素上加key，应该在抽象后的React 组件上加。

# 错误的示例
function ListItem(props) {
  const value = props.value;
  return (
    // 错啦！你不需要在这里指定key:
    <li key={value.toString()}>
      {value}
    </li>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    //错啦！元素的key应该在这里指定：
    <ListItem value={number} />
  );
  return (
    <ul> {listItems} </ul>
  );
}

# 正确的示例
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} </ul>
  );
}

N、便利组件的 key 属性

Keys only make sense in the context of the surrounding array.
所以我们应该把key属性加在循环体中的元素上(可能是具体的标签，也可能是包含了某个标签的组件)。

function ListItem(props) {
  const value = props.value;
  return (
    // 1、虽然最终的结果是若干个<li/>标签，但是<li/>标签并不是直接在循环体中，所以不需要加key。
    <li key={value.toString()}>
      {value}
    </li>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 2、虽然这里用到的是包装了<li/>标签的组件，但是它在循环体中，所以需要添加key字段。
    <ListItem value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

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

、可控Form表单

1、submit handler

This form has the default HTML form behavior of browsing to a new page when the user submits the form.

//submit handler,
handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
   // 阻止form表单默认行为。 
   event.preventDefault(); 
  }
//form表单
<form onSubmit={this.handleSubmit}> 
    ...
</form>

2、textarea 默认值

< textarea value="React 设置textare默认值的方式"/>

3、select 默认选中项

1、传统HTML的select我们只要在某一个option中添加 selected属性，它就会默认选中。
2、React 只要在 select标签中添加value属性，指定需要默认选中的项。

// 因为在 select中设置了 value="d"，所以<option value="d"/> 默认被选中。
<select value="d">
  <option value="">--请选择--</option>
  <option value="a">a</option>
  <option value="b">b</option>
  <option value="c">c</option>
  <option value="d">d</option>
</select>

4、input框

如果给input框设定了 value 固定值(1、'2'、'')会导致无法输入。

处理方式：要么不设置value，要么设置为：value={null或 undefined}

、props.children

String、Expressions、Functions、JSX都可以作为组件的children来传递。

<div>
'我是一个String'   //String
{ 1 + 2 + 3 + 4 }  // 表达式
// 函数表达式
{(index) => <div key={index}>This is item {index} in the list</div>}
<Children/>
</div>

Booleans, Null, and Undefined 会被忽略，0 不会被处理成 false(这一点与js不太一样)。

## 示例：
<div>
  {bool && <Header />}
  <p>你好</p>
</div>
### 1、bool === true/ '0' / [] / {}:
<div>
  <Header />
  <p>你好</p>
</div>
### 2、bool === fasle/null/undefined :
<div>
  <p>你好</p>
</div>
### 3、bool ===0:
<div>
  0
  <p>你好</p>
</div>

判断数组长度时，不要简写：someArray.length，这样写：someArray.length > 0
想展示：Booleans, Null, Undefined：String('Booleans / Null / Undefined')

N、React-Router RestFul风格传参

如果某一个参数加了()，如(/:params1)，那么url中没有/:params1也能匹配到
通过 this.props.routeParams.形参名称来获取

//路由
<Route path="/getParams/:params0(/:params1)" component={Comp01} />

//页面中的 <a>标签
<a href="/#/getParams/我是一个实参/我是另一个">Restfull 传参</a>

//组件JS中获取参数
<h1>    
        Hello {this.props.routeParams.params0},and {this.props.routeParams.params1}
</h1>
//请求路径
http://localhost:3000/#/getParams/我是一个实参/我是另一个
// 效果
##  Hello 我是一个实参,and 我是另一个

或：
//请求路径
http://localhost:3000/#/getParams/我是一个实参
// 效果
##  Hello 我是一个实参,and

React--官方文档学习

一、在组件中写style的样式表

二、JSX和Dom属性

三、State & 生命周期

1、this.setState()

四、事件处理

1、与传统DOM元素的区别

2、阻止默认事件

3、JSX 回调函数中 this 的问题

4、回调函数传参

五、条件渲染

六、列表 & Keys

1、Keys

2、DOM 元素 li 升级成 <Li /> 组件后 的key问题

N、便利组件的 key 属性

、可控Form表单

1、submit handler

2、textarea 默认值

3、select 默认选中项

4、input框

、props.children

N、React-Router RestFul风格传参

推荐阅读更多精彩内容

2、DOM 元素 li 升级成 <Li /> 组件后的key问题