React的组件渲染

Veröffentlicht am

组件渲染

React元素也可以是用户自定义的组件。

1
const element = <Welcome name='Sara' />

当React遇到的元素是用户自定义的组件，它会将JSX属性作为单个对象传递给该组件，这个对象称为props。

组件名必须以大写字母开头。

组合组件

组件可以在它的输出中引用其他组件，这就可以让我们用同一组件来抽象出任一层次的细节，在React应用中，按钮，表单，对话框，整个屏幕内容等，这些通常都被表示为组件。

通常一个新的React应用程序的顶部是一个App组件，但是如果要React集成包应用程序中，则可以自上而下，使用Button这样的小组件作为开始，并逐渐的运用到视图层的顶部。

组件的返回值只能有一个根元素，这也是我们要用一个div将其包起来的原因

提取组件

提取组件一开始看起来像是一项单调而乏味的工作，但是在大型应用中，构建可复用的组件完全是值得的，当你的UI中有一部分重复使用了好几次（比如，Button，panel，Avatar），或者其自身足够复杂（比如，App，FeedStory，Comment），类似这些都是抽象成一个可复用的绝佳选择，这也是一个比较好的做法。

props的只读性

无论是使用函数或是类来声明一个组件，他绝不能修改他自己的props

1
2
3
function sum(a+b){
	return a+b
}

类似于上面的这种函数称之为纯函数，他没有改变他自己的输入值，当传入的值相同时，总会返回相同的值。
与之相对的是非纯函数，他会改变他自身的输入值

1
2
3
function withDraw(account,amount){
	account.total -= amount
}

所有React组件必须向纯函数那样使用自己的props.

State和生命周期

如何正确的使用state

  1. 这样的代码是不会重新渲染组件的
    1
    this.state.comment = 'hello'

应当使用

1
this.setState({comment:'hello'})

  1. 构造函数是唯一能够初始化的地方

异步更新

  1. React可以将多个setState()调用，合并成一个调用来提高性能

  2. 因为this.props和this.state可能是异步更新的，你不应该依靠它们的值区机械段下一个状态
    比如下面这个代码，可能无法更新计数器

    1
    2
    3
    this.setState({
     counter:this.state.counter + this.props.icrement
    })

    要修复它请视同第二形态的setState来接受一个函数，而不是一个对象，该函数将接受先前的状态作为第一个参数，将需要更新的值作为第二个参数。

    1
    2
    3
    this.setState((preState,props) => ({
     counter:preState.counter + props.incrment
    }))

    状态更新合并

    当你调用setState时，React将你提供的对象合并到当前状态。
    你的state可能包含一些独立的变量。

    1
    2
    3
    4
    5
    6
    7
    constructor(props){
    	super(props)
    	this.state={
    	 post:[],
    	 comment:[]
    	}
    }

    你可以调用setState独立的更新他们

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    componentDidMount(){
     fetchPost().then((response) =>{
      this.setState({
       posts:response.posts
      })
     })
     fetchComment().then(response =>{
      this.setState({
       comments:response.comments
      })
     })
    }

    这里的合并是浅合并，也就是说this.setState({comment})完整保留了this.state.posts，但完全替代了this.state.comments