关于react.js:React学习笔记

1次阅读

共计 3170 个字符，预计需要花费 8 分钟才能阅读完成。

1：在 React 中有一个命名标准，通常会将代表事件的监听 prop 命名为 on[Event] 将处理事件的监听办法命名为 handle[Event] 这样的格局

2：React DOM 应用 camelCase 小驼峰命名来定义属性的名称，例如，JSX 里的 class 变成了 className，而 tabindex 则变为 tabIndex。

3：React Dom 会将元素和他的子元素与他们之前的状态进行比拟，只更新他须要更新的局部。React DOM 只会更新理论扭转了的内容。

4：函数组件：function Square(props) {
  return (<button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}
你同时还能够应用 ES6 的 class 来定义组件：class Welcome extends React.Component {render() {return <h1>Hello, {this.props.name}</h1>;
  }
}
// 留神：组件名称必须以大写字母结尾。React 会将以小写字母结尾的组件
// 视为原生 DOM 标签。例如，<div /> 代表 HTML 的 div 标签，而 <Square /> 
// 则代表一个组件，并且需在作用域内应用 Square。

5: Props 的只读性 所有 React 组件都必须像纯函数一样爱护它们的 props 不被更改。

6: State 的更新可能是异步的

出于性能思考，react 可能会把多个 setState() 调用合并成一个调用。

因为 this.props 和 this.state 可能会异步更新，所以不要依赖他们的值来更新下一个状态。

例如，此代码可能会无奈更新计数器：

this.setState({counter: this.state.counter + this.props.increment,});

要解决这个问题能够让 setState 接管一个函数而不是对象

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

7：事件处理

// 此语法确保 `handleClick` 内的 `this` 已被绑定。// 留神: 这是 * 实验性 * 语法。handleClick = () => {}
 <button onClick={this.handleClick}>
        Click me
 </button>

8: 条件渲染 与运算符 &&

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}
// 之所以能这样做，是因为在 JavaScript 中，true && expression 
// 总是会返回 expression, 而 false && expression 总是会返回 false。// 因而，如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会疏忽并跳过它。

另一种条件渲染是应用三目运算符 condition ? true : false。
阻止组件渲染，返回 null
9: 列表和 Key
Key 帮忙 react 辨认哪些元素扭转了，比方被增加或删除，因而你该当给数组中每一个元素赋予一个确定的标识。通常咱们应用数组中的 id 作为 key，当没有 id 时，能够应用数组的索引 index 作为 Key。如果列表我的项目的程序可能会扭转，不倡议应用索引 index 作为 key

key 只是在兄弟节点之间必须惟一

10：状态晋升

一个组件不能间接拜访另一个组件的 state，一个组件内的 state 只能由这个组件的 setState()来扭转，包含子组件应用 props 也不能间接批改，因为 props 是只读的。然而 子组件能够调用父组件的办法来更改父组件的 state

(1) 什么时候应用状态晋升？

两个组件须要共享数据，一起来实现某一项操作。这个时候就会用到状态晋升。咱们能够把这些共享的数据放到他们独特的父组件中去。这两个组件就都能应用这一数据了。这一思维就是状态晋升。

(2) 应用：实时进制转换。输出克数量，立马就将转换好的千克输入，反之亦然。

// 父组件
class Father extends React.Component {constructor(props) {super(props);
    this.handleWeightChange = this.handleWeightChange.bind(this);
    this.handleWeightChange2 = this.handleWeightChange2.bind(this);
    this.onDec = this.onDec.bind(this);
    this.onHec = this.onHec.bind(this);
    this.state = {
      scale: 'g',
      nums: ""
    }
  }
  handleWeightChange(value) {
    this.setState({
      scale: "kg",
      nums: value
    })
  }
  handleWeightChange2(value) {
    this.setState({
      scale: "g",
      nums: value
    })
  }
  onDec(nums) {return nums * 1000}
  onHec(nums) {return nums / 1000}
  render() {
    const nums = this.state.nums;
    const scale = this.state.scale;
    const dec = scale == "g" ? this.onDec(nums) : nums;     // 判断分量为 g，并进行转换
    const hec = scale == "kg" ? this.onHec(nums) : nums;
    return <div>
      <NumberInput onWeightChange={this.handleWeightChange} value={dec} scale="g" />
      <NumberInput onWeightChange={this.handleWeightChange2} value={hec} scale="kg" />
    </div>
  }
}

// 子组件
class NumberInput extends React.Component {constructor(props) {super(props);
    this.handleChange = this.handleChange.bind(this);

  }
  handleChange(e) {this.props.onWeightChange(e.target.value);

  }
  render() {
    const value = this.props.value
    const scaleLabel = this.props.scale == "g" ? "克" : "千克";
    return <div>
      <label>{scaleLabel} : </label>
      <input type="text" onChange={this.handleChange} value={value} />
    </div>
  }
}

11：props 和 state 的区别？
他们都是用来保存信息的，这些信息能够管制组件的渲染输入。重要的不同点是，props 是传递给组件的，state 是组件内被组件本人治理的。

12：class 组件和函数组件的区别
(定义组件有两个要求：a：组件名称肯定要以大写字母结尾，b：组件的返回值只能有一个根元素)
A：函数组件性能比类组件性能高。因为类组件应用的时候要实例化，函数组件执行的时候间接返回后果

正文完