【React】初学React

2020-02-28  本文已影响0人  前端菜篮子

A. react中如何创建元素呢？

说明一点：
属性都改为驼峰形式（无障碍属性aria-*除外），
class改成className

创建元素

B. 变量或表达式如何表示呢？大括号{ }包起来

变量值用大括号包裹

C. 元素和组件的区别

元素是构成 React 应用的最小砖块。元素描述了你在屏幕上想看到的内容。

const element = <h1>Hello, world</h1>;

组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。
组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 props），并返回用于描述页面展示内容的 React 元素。

组件

D. React元素与浏览器的 DOM 元素的区别

React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。那如何才能刷新页面上的数据呢？看下面计时器的例子：

计时器

但：React 元素是创建开销极小的普通对象？React 只更新它需要更新的部分

React DOM 会将元素和它的子元素与它们之前的状态进行比较，并只会进行必要的更新来使 DOM 达到预期的状态。

你可以使用浏览器的检查元素工具查看上一个例子来确认这一点。

DOM inspector showing granular updates

尽管每一秒我们都会新建一个描述整个 UI 树的元素，React DOM 只会更新实际改变了的内容

E1. 组件入参props：只读，不可修改

props

所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

  纯函数
  function sum(a, b) {
    return a + b;
  }
  不纯函数
  function withdraw(account, amount) {
    account.total -= amount;
  }

E2. React中的占位符：类似vue中的slot

占位

E3. 如何像使用vue的$attrs一样使用React的props

在react中传递props，如果一层一层传递，只需要使用 <Component {...props}></Component>

F. class 组件中添加 state：请使用setState()修改

class组件

关于state的几点说明：
① 不要直接修改 state，代码this.state.comment = 'Hello'不会重新渲染组件
② 而是应该使用 setState()： this.setState({comment: 'Hello'})
③ 构造函数是唯一可以给 this.state 赋值的地方
④ state 的更新可能是异步的:

state异步更新

⑤ setState的更新会被合并

state合并更新
⑥ 组件可以选择把它的 state 作为 props 向下传递到它的子组件中
state值作为props值

G. 事件处理

事件处理

使用 React 时，你一般不需要使用 addEventListener 为已创建的 DOM 元素添加监听器。你只需要在该元素初始渲染的时候添加监听器即可。

当你使用 ES6 class 语法定义一个组件的时候，通常的做法是将事件处理函数声明为 class 中的方法。例如，下面的 Toggle 组件会渲染一个让用户切换开关状态的按钮：

事件处理函数

向事件处理程序传递参数

在循环中，通常我们会为事件处理函数传递额外的参数。例如，若 id 是你要删除那一行的 ID，以下两种方式都可以向事件处理函数传递参数：

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

上述两种方式是等价的，分别通过箭头函数和 Function.prototype.bind 来实现。

在这两种情况下，React 的事件对象 e 会被作为第二个参数传递。如果通过箭头函数的方式，事件对象必须显式的进行传递，而通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。

H. 条件渲染if & 列表 for

条件渲染 列表渲染

JSX 允许在大括号中嵌入任何表达式，所以我们可以内联 map() 返回的结果

function NumberList(props) {
  const numbers = props.numbers;
  return (
    <ul>
      {numbers.map((number) =>
        <ListItem key={number.toString()} value={number} />
      )}
    </ul>
  );
}

I. 表单Form：受控组件

受控组件 
handleChange(event) {
  this.setState({value: event.target.value.toUpperCase()});
}

处理多个输入：当需要处理多个 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> 参与:
          <input name="isGoing" type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange} />
        </label><br />
        <label>来宾人数:
          <input name="numberOfGuests" type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
        </label>
      </form>
    );
  }
}

受控输入空值：在受控组件上指定 value 的 prop 可以防止用户更改输入。如果指定了 value，但输入仍可编辑，则可能是意外地将value 设置为 undefined 或 null。

ReactDOM.render(<input value="hi" />, mountNode);
setTimeout(function() {
  ReactDOM.render(<input value={null} />, mountNode);
}, 1000);

成熟的解决方案: 如果你想寻找包含验证、追踪访问字段以及处理表单提交的完整解决方案，使用 Formik 是不错的选择。

文件 input 标签：<input type="file" />，它的 value 只读，所以它是 React 中的一个非受控组件。

J. 非受控组件

非受控组件

文件输入：在 React 中，<input type="file" /> 始终是一个非受控组件，因为它的值只能由用户设置，而不能通过代码控制

class FileInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.fileInput = React.createRef();
  }
  handleSubmit(event) {
    event.preventDefault();
    alert(
      `Selected file - ${
        this.fileInput.current.files[0].name
      }`
    );
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Upload file:
          <input type="file" ref={this.fileInput} />
        </label>
        <br />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

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

K. 状态提升【官网案例就不重复了】

上一篇下一篇

猜你喜欢

热点阅读