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() 钩子中卸载定时器。