什麼時候在擴展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

來源

2017-08-10 Nathan Hampshire

你剛剛問過什麼（'我想知道每次使用函數更改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>

你必須非常小心當你需要渲染你的部件，否則它很容易重新呈現的一切！這將導致性能問題。

來源

2017-08-10 15:44:12 Crysfel

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

這取決於您定義組件render的方法。它可以根據您提供的state或props進行更改。

不太常見，但您可以check outshouldComponentUpdate，因爲它允許您覆蓋該方法，以便在需要性能提升時爲其提供更多「智能」。

來源

2017-08-10 16:16:40 amigo21

什麼時候在擴展Component的類中調用render（）？

回答

相關問題