什么时候在扩展Component的类中调用render（）？

问题描述：

什么刷新视图反应或代码总是直播显示？什么时候在扩展Component的类中调用render（）？

我有一个名为removeAdmin和makeAdmin的函数，它将Admins添加和删除用户，然后当用户是admin时，会员组件渲染和管理员屏蔽徽标呈现。它工作正常，但我想知道每次使用函数更改UI时是否触发渲染，或者如果渲染实时监听组件中的更改？

class MemberList extends Component { 

constructor(props) { 
    super(props) 
    this.state = { 
     members: [], 
     loading: false, 
     administrators: [] 
    } 
    this.makeAdmin = this.makeAdmin.bind(this) 
    this.removeAdmin = this.removeAdmin.bind(this) 
} 

componentDidMount(){ 
    this.setState({loading:true}) 
    fetch('https://api.randomuser.me/?nat=US&results=12') 
    .then(response => response.json()) 
     .then(json => json.results) 
     .then(members => this.setState({ 
      members, 
      loading:false 
     })) 
} 

makeAdmin(email){ 
    const administrators = [ 
     ...this.state.administrators, 
     email 
    ] 
    this.setState({administrators}) 
} 

removeAdmin(email){ 
    const administrators = this.state.administrators.filter(
      adminEmail => adminEmail !== email 
     ) 
     this.setState({administrators}) 

} 


render() { 
    const { members, loading } = this.state 
    return (
     <div className="member-list"> 
      <h1>Society Members</h1> 

      { 
       (loading) ? 
        <span> loading...</span>: 
        <span>{members.length} members</span> 
      } 

       { (members.length)? 
       members.map(
       (member, i) => 
        <Member key={i} 
          // This admin prop is worked out by enumerating through the administrator 
          // array with some(). some() passes in the enumerators, checking whether 
          // the current member in members.map() exists in the administrators array 
          // and returns admin=true if so. 
          admin={this.state.administrators.some(
           adminEmail => adminEmail === member.email 
           )} 
          name={member.name.first + '' + member.name.last} 
          email={member.email} 
          thumbnail={member.picture.thumbnail} 
          makeAdmin={this.makeAdmin} 
          removeAdmin={this.removeAdmin}/> 
       ): 
       <span>Currently 0 members</span> 
      } 


     </div> 
    )

和会员组分：

class Member extends Component { 

componentWillMount(){ 
this.style={ 
    backgroundColor: 'grey' 
} 
} 
render() { 

const { name, thumbnail, email, admin, makeAdmin, removeAdmin } = this.props 
return (

    <div className="member" style={this.style}> 
    <h1>{ name } {(admin) ? <FaShield/> : null}</h1> 
    <div> 
     <img src={ thumbnail }/> 
    </div> 
    <div> 
    { 
     (admin)? 
       <Button title="Make Admin" onClick={() => removeAdmin(email) } color="#841584"> Remove Admin </Button> 
: 
    <Button title="Make Admin" onClick={() => makeAdmin(email) } color="#841584"> Make Admin </Button> 

    } 
    <a href={`mailto:${ email }`}><p> {email} </p></a> 
    </div> 

    </div> 


) 
} 
} 

export default Member

你刚刚问过什么（'我想知道每次使用函数更改UI时渲染是否被触发，或者渲染是否实时监听组件的变化？'）是一个非常基本的React问题，你可以通过谷歌搜索在5分钟内找到答案。 – DrunkDevKek

答

接收新的属性时什么触发新的渲染上部件是当状态改变时或。

驱动每个组件中的渲染有两个主要对象this.props和this.state。如果任何这些对象得到更新，然后render方法得到执行。

this.props对象在您将新属性发送给子对象时得到更新。 this.state使用this.setState方法更新。

话虽这么说，它跟踪您发送到孩子的属性，作为一个经验法则，我总是建议不使用扩展运算符道具传递给孩子，比如真的很重要：

<Parent> 
    <Child {...this.props} /> 
</Parent>

我会避免这种模式，因为如果有任何道具发生了变化，那么所有的道具都会发送给孩子。相反，我建议只发送孩子需要的东西。

<Parent> 
    <Child some={this.props.value} /> 
</Parent>

你必须非常小心当你需要渲染你的部件，否则它很容易重新呈现的一切！这将导致性能问题。

您的明星，谢谢@Crysfel，正是我需要知道的 –

答

这取决于您定义组件render的方法。它可以根据您提供的state或props进行更改。

不太常见，但您可以check outshouldComponentUpdate，因为它允许您覆盖该方法，以便在需要性能提升时为其提供更多“智能”。

什么时候在扩展Component的类中调用render（）？

相关推荐