react学习系列(一)

React学习

1.预习

先提前了解与熟悉常用的元素。

• JSX是React的核心内容。是JavaScript XML简写。优势是声明式的语法，更加直观，与HTML结构相同，降低学习成本，提高开发效率。
• 元素是构成 React 应用的最小单位，它用于描述屏幕上输出的内容。其中react 的核心就是渲染元素。渲染元素常用render。
• 组件一个组件接收一些参数，我们把这些参数叫做 props（“props” 是 “properties” 简写），然后通过 render 方法返回需要展示在屏幕上的视图的层次结构。
• State React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
  React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面。
• props 参数 state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。
• 箭头函数

(参数1, 参数2, …, 参数N) => { 函数声明 }
(参数1, 参数2, …, 参数N) => 表达式（单一）
//相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }

// 当只有一个参数时，圆括号是可选的：
(单一参数) => {函数声明}
单一参数 => {函数声明}

// 没有参数的函数应该写成一对圆括号。
() => {函数声明}

2.JSX 的使用

JSX语法：

• React元素的属性使用驼峰命名法
• 特殊属性名： class -> className; for -> htmlFor; tabindex -> tabIndex
• JSX中使用变量，用大括号包裹

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

• JSX 条件渲染

const isLoading = false
const loadData = () => {
  if (isLoading) {
    return (<div>loading...</div>)
  }
  return (<div>数据加载完成，此处显示加载后的数据</div>)
}

• JSX列表渲染

const songs = [
  { id: 1, name: '001'},
  { id: 2, name: '002'},
  { id: 3, name: '003'},
]
const list = (
  <ul>
      {songs.map(item => {
          return (
              <li key={item.id}>{item.name}</li>
          )
      })}
  </ul>
)

ReactDOM.render(list, document.getElementById('root'))

• 元素渲染 想要将一个 React 元素渲染到根 DOM 节点中，只需把它们一起传入 ReactDOM.render()

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

3.组件的使用

组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。
React 组件创建方式方式有两种，使用函数创建，和使用类创建。
组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。

Class 组件应该始终使用 props 参数来调用父类的构造函数。

  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

创建简单的函数组件

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

使用 ES6 的 class 来定义组件

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

将函数组件转换成 class 组件
通过以下五步将 Clock 的函数组件转成 class 组件：

1. 创建一个同名的 ES6 class，并且继承于 React.Component。
2. 添加一个空的 render() 方法。
3. 将函数体移动到 render() 方法之中。
4. 在 render() 方法中使用 this.props 替换 props。
5. 删除剩余的空函数声明。

4.state

允许 React 组件随用户操作、网络响应或者其他变化而动态更改输出内容。并且是state 是私有的，并且完全受控于当前组件。

class Clock extends React.Component {
  constructor(props) {
  //通过以下方式将 props 传递到父类的构造函数中
    super(props);
    //添加一个 class 构造函数，然后在该函数中为 this.state 赋初值
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        //this.props.date 替换成 this.state.date
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

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

关于 setState() 你应该了解三件事：

• 不要直接修改 State，构造函数是唯一可以给 this.state 赋值的地方,不要直接对state进行赋值。
• State 的更新可能是异步的
• State 的更新会被合并。

  componentDidMount() {
    fetchPosts().then(response => {
      this.setState({
        posts: response.posts
      });
    });

    fetchComments().then(response => {
      this.setState({
        comments: response.comments
      });
    });
  }

生命周期函数

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
  }

  componentWillUnmount() {
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

componentDidMount() 与 componentWillUnmount() 方法被称作生命周期钩子。
在组件输出到 DOM 后会执行 componentDidMount() 钩子，我们就可以在这个钩子上设置一个定时器。
this.timerID 为定时器的 ID，我们可以在 componentWillUnmount() 钩子中卸载定时器。