react中的state和props
<p>这两个知识点是react中非常重要的部分，今天再深入复习一遍。</p><h2>state</h2>
<p>state这个单词本来的意思是状态，在react中，它只是用来控制这个组件本身自己的状态，我们可以用state来完成对行为的控制、数据的更新、界面的渲染，由于组件<span style="color: rgba(255, 0, 0, 1)">不能修改传入的props</span>，所以需要记录自身的数据变化。</p>
<p>setStart</p>
<p>不能直接给state赋值，state的更新需要运用到setState，给state赋值的确会更改state，具体流程是：当调用setState这个函数的时候，React.js 会更新组件的状态 state ，并且重新调用 render 方法，然后再把 render 方法所渲染的最新的内容显示到页面上。它的工作除了要更动 this.state 之外，还要负责触发重新渲染，这里面要经过 React 核心 <span style="color: rgba(255, 0, 0, 1)">diff 算法</span>，最终才能决定是否要进行重渲染，以及如何渲染。而且为了批次与效能的理由，多个 setState 呼叫有可能在执行过程中还需要被合并，所以它被设计以延时的来进行执行是相当合理的。</p>
<div>
<div>在 React 的 setState 函数实现中，会根据一个变量 isBatchingUpdates 判断是直接更新 this.state 还是放到队列中回头再说，而 <span style="color: rgba(255, 0, 0, 1)">isBatchingUpdates 默认是 false</span>，也就表示 setState 会同步更新 this.state，但是，有一个函数 <span style="color: rgba(255, 0, 0, 1)">batchedUpdates，这个函数会把 isBatchingUpdates 修改为 true，而当 React 在调用事件处理函数之前就会调用这个 batchedUpdates</span>，造成的后果，就是<span style="color: rgba(255, 0, 0, 1)">由 React 控制的事件处理过程 setState 不会同步更新 this.state。</span></div>
<div> </div>
<div>综上，<strong>由 React 控制的事件处理过程 setState 不会同步更新 this.state；React 控制之外的情况， setState 会同步更新 this.state。</strong></div>
<div> </div>
<h2>props</h2>
<div>
<div>state 和 props 主要的区别在于 <span style="color: rgba(255, 0, 0, 1)"><strong>props</strong> 是不可变的，而 state 可以根据与用户交互来改变</span>。这就是为什么有些容器组件需要定义 state 来更新和修改数据， 而子组件只能通过 props 来传递数据。</div>
<div>react中说的单向数据流值说的就是props，根据这一特点它还有一个作用：组件之间的通信。props本身是不可变的，但是有一种情形它貌似可变，即是将父组件的state作为子组件的props，当父组件的state改变，子组件的props也跟着</div>
<div>改变，其实它仍旧遵循了这一定律：props是不可更改的。</div>
<div><span style="color: rgba(255, 0, 0, 1)">props一定来源于默认属性或者通过父组件传递而来：</span></div>
<div>1.可以通过组件类的 defaultProps 属性为 props 设置默认值。
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">class HelloMessage extends React.Component {
render() {
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> (
</span><h1>Hello, {<span style="color: rgba(0, 0, 255, 1)">this</span>.props.name}</h1>
<span style="color: rgba(0, 0, 0, 1)"> );
}
}
HelloMessage.defaultProps </span>=<span style="color: rgba(0, 0, 0, 1)"> {
name: </span>'Runoob'<span style="color: rgba(0, 0, 0, 1)">
};
const element </span>= <HelloMessage/>;
<span style="color: rgba(0, 0, 0, 1)">
ReactDOM.render(
element,
document.getElementById(</span>'example'<span style="color: rgba(0, 0, 0, 1)">)
);</span></pre>
</div>
<p>2.组合使用 state 和 props ：在父组件中设置 state， 并通过在子组件上使用 props 将其传递到子组件上。在 render 函数中, 我们设置 name 和 site 来获取父组件传递过来的数据。</p>
</div>
</div>
<div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">class WebSite extends React.Component {
constructor() {
super();
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.state =<span style="color: rgba(0, 0, 0, 1)"> {
name: </span>"不知名小网站"<span style="color: rgba(0, 0, 0, 1)">,
site: </span>"https://www.sherry.com"<span style="color: rgba(0, 0, 0, 1)">
}
}
render() {
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> (
</span><div>
<Name name={<span style="color: rgba(0, 0, 255, 1)">this</span>.state.name} />
<Link site={<span style="color: rgba(0, 0, 255, 1)">this</span>.state.site} />
</div>
<span style="color: rgba(0, 0, 0, 1)"> );
}
}
class Name extends React.Component {
render() {
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> (
</span><h1>{<span style="color: rgba(0, 0, 255, 1)">this</span>.props.name}</h1>
<span style="color: rgba(0, 0, 0, 1)"> );
}
}
class Link extends React.Component {
render() {
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> (
</span><a href={<span style="color: rgba(0, 0, 255, 1)">this</span>.props.site}><span style="color: rgba(0, 0, 0, 1)">
{</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.props.site}
</span></a>
<span style="color: rgba(0, 0, 0, 1)"> );
}
}
ReactDOM.render(
</span><WebSite />,
document.getElementById('example'<span style="color: rgba(0, 0, 0, 1)">)
);</span></pre>
</div>
<p> </p>
没有 state 的组件叫无状态组件（stateless component），设置了 state 的叫做有状态组件（stateful component）。因为状态会带来管理的复杂性，我们尽量多地写无状态组件，尽量少地写有状态的组件。这样会降低代码维护的难度，也会在一定程度上增强组件的可复用性。函数式组件就只有props没有state。</div>
</div>
<h2>总结</h2>
<p>1.props用于定义外部接口，state用于记录内部状态</p>
<p>2.props的赋值在于外部世界使用组件，state的赋值在于组件内部</p>
<p>3.组件不应该改变props的值，而state存在的目的就是让组件来修改的</p>
<div>
<p>组件的state相当于组件的记忆，其存在的意义就是被修改，每一次通过setState函数修改state就改变了组件的状态，然后通过把渲染过程体现出来。但是组件的props绝不应该被修改，我们可以想象一个场景，一个父组件将同一个props传给几个子组件，若有一个子组件将props修改，那么其他的组件就不一定能得到自己想到的值，此时的情况将混乱不堪。</p>
<p> </p>
</div><br><br>
来源：https://www.cnblogs.com/sherrycat/p/11153865.html
頁:
[1]