重新认识受控和非受控组件重新认识受控和非受控组件

作者：霜序
校稿：袋鼠云数栈前端团队运营小组
该文章包含如下内容
受控与非受控组件
- 非受控组件
- 受控组件
受控和非受控组件边界
反模式
解决方案
前言在 HTML 中，表单元素(/
</code>/<code></code>)，通常自己会维护 state，并根据用户的输入进行更新<br />
 
 <blockquote><code><form>
<label>
名字:
<input type="text" name="name" />
</label>
<input type="submit" value="https://www.it610.com/article/提交" />
</form>
</code></blockquote><br />
 
 在这个 HTML 中，我们可以在 input 中随意的输入值，如果我们需要获取到当前 input 所输入的内容，应该怎么做呢？<br />
 
 受控与非受控组件 
 非受控组件(uncontrolled component)<br />
 
 使用非受控组件，不是为每个状态更新编写数据处理函数，而是将表单数据交给 DOM 节点来处理，可以使用 Ref 来获取数据<br> 在非受控组件中，希望能够赋予表单一个初始值，但是不去控制后续的更新。可以采用<code>defaultValue</code>指定一个默认值<br />
 
 <blockquote><code>class Form extends Component {
handleSubmitClick = () => {
const name = this._name.value;

// do something with `name`
}
render() {
return (<input
type="text"
defaultValue="https://www.it610.com/article/Bob"
ref={input => this._name = input}
/>
<button onClick={this.handleSubmitClick}>Sign up</button>);

}
}
</code></blockquote><br />
 
 受控组件(controlled component)<br />
 
 在 React 中，可变状态(mutable state)通常保存在组件的 state 属性中，并且只能够通过<code>setState</code> 来更新<br />
 
 <blockquote><code>class NameForm extends React.Component {
constructor(props) {
super(props);

this.state = {value: 'shuangxu'};

}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
名字:
<input type="text" value=https://www.it610.com/article/{this.state.value}/>
</label>
<input type="submit" value="https://www.it610.com/article/提交" />
</form>
);

}
}
</code></blockquote><br />
 
 在上述的代码中，在 Input 设置了 value 属性值，因此显示的值始终为<code>this.state.value</code>，这使得 state 成为了唯一的数据源。<br />
 
 <blockquote><code>const handleChange = (event) => {
	this.setState({ value: event.target.value })
}<input type="text" value=https://www.it610.com/article/{this.state.value} onChange={this.handleChange}/>
</code></blockquote><br />
 
 如果我们在上面的示例中写入<code>handleChange</code> 方法，那么每次按键都会执行该方法并且更新 React 的 state,因此表单的值将随着用户的输入而改变<br />
 
 React 组件控制着用户输入过程中表单发生的操作并且 state 还是唯一数据源，被 React 以这种方式控制取值的表单输入元素叫做受控组件<br />
 
 受控和非受控组件边界 
 非受控组件<br />
 
 Input 组件只接收一个<code>defaultValue</code>默认值，调用 Input 组件的时候，只需要通过 props 传递一个<code>defaultValue</code> 即可<br />
 
 <blockquote><code>//组件
function Input({defaultValue}){
	return <input defaultValue=https://www.it610.com/article/{defaultValue} />
}//调用
function Demo(){
	return <Input defaultValue='https://www.it610.com/article/shuangxu' />
}
</code></blockquote><br />
 
 受控组件<br />
 
 数值的展示和变更需要由<code>state</code>和<code>setState</code>，组件内部控制 state，并实现自己的 onChange 方法<br />
 
 <blockquote><code>//组件
function Input() {
	const [value, setValue] = useState('shuangxu')
return <input value=https://www.it610.com/article/{value} onChange={e=>setValue(e.target.value)} />;

}//调用
function Demo() {
return <Input />;

}
</code></blockquote><br />
 
 请问这时 Input 组件是受控还是非受控？如果我们采用之前的写法更改这个组件以及其调用<br />
 
 <blockquote><code>//组件
function Input({defaultValue}) {
	const [value, setValue] = useState(defaultValue)
return <input value=https://www.it610.com/article/{value} onChange={e=>setValue(e.target.value)} />;

}//调用
function Demo() {
return <Input defaultValue='https://www.it610.com/article/shuangxu' />;

}
</code></blockquote><br />
 
 此时的 Input 组件本身是一个受控组件，它是由唯一的 state 数据驱动的。但是对于 Demo 来说，我们并没有 Input 组件的一个数据变更权利，那么对于 Demo 组件来说，Input 组件就是一个非受控组件。(??以非受控组件的方式去调用受控组件是一种反模式)<br />
 
 如何修改当前的 Input 和 Demo 组件代码，才能够使得 Input 组件本身也是一个受控组件，并且对于 Demo 组件来说它也是受控的讷？<br />
 
 <blockquote><code>function Input({value, onChange}){
	return <input value=https://www.it610.com/article/{value} onChange={onChange}
}function Demo(){
	const [value, setValue] = useState('shuangxu')
	return <Input value=https://www.it610.com/article/{value} onChange={e => setValue(e.target.value)} />
</code></blockquote><br />
 
 反模式-以非受控组件的方式去调用受控组件 
 虽然受控和非受控通常用来指向表单的 inputs，也能用来描述数据频繁更新的组件。<br> 通过上一节受控与非受控组件的边界划分，我们可以简单的分类为：<br />
 
 <ul> 
<li>如果使用 props 传入数据，有对应的数据处理方法，组件对于父级来说认为是可控的</li> 
<li>数据只是保存在组件内部的 state 中，组件对于父级来说是非受控的</li> 
 </ul> 
 ??什么是派生 state<br />
 
 简单来说，如果一个组件的 state 中的某个数据来自外部，就将该数据称之为派生状态。<br />
 
 大部分使用派生 state 导致的问题，不外乎两个原因：<br />
 
 <ul> 
<li>直接复制 props 到 state</li> 
<li>如果 props 和 state 不一致就更新 state</li> 
 </ul> 
 直接复制 prop 到 state<br />
 
 ??<code>getDerivedStateFromProps</code>和<code>componentWillReceiveProps</code>的执行时期<br />
 
 <ul> 
<li>在父级重新渲染时，不管 props 是否有变化，这两个生命周期都会执行</li> 
<li>所以在两个方法里面直接复制 props 到 state 是不安全的，会导致 state 没有正确渲染</li> 
 </ul> 
 <blockquote><code>class EmailInput extends React.Component {
constructor(props) {
super(props);

this.state = {
email: this.props.email//初始值为props中email
};

}
componentWillReceiveProps(nextProps) {
this.setState({ email: nextProps.email });
//更新时，重新给state赋值
}
handleChange = (e) => {
this.setState({ email: e.target.value });

};

render() {
const { email } = this.state;

return <input value=https://www.it610.com/article/{email} onChange={this.handleChange} />;

}
}
</code></blockquote><br />
 
 点击查看示例<br />
 
 给 Input 设置 props 传来的初始值，在 Input 输入时它会修改 state。但是如果父组件重新渲染时，输入框 Input 的值就会丢失，变成 props 的默认值<br />
 
 即使我们在重置前比较<code>nextProps.email!==this.state.email</code>仍然会导致更新<br />
 
 针对于目前这个小 demo 来说，可以使用<code>shouldComponentUpdate</code>来比较 props 中的 email 是否修改再来决定是否需要重新渲染。但是对于实际应用来说，这种处理方式并不可行，一个组件会接收多个 prop，任何一个 prop 的改变都会导致重新渲染和不正确的状态重置。加上行内函数和对象 prop，创建一个完全可靠的<code>shouldComponentUpdate</code>会变得越来越难。<code>shouldComponentUpdate</code>这个生命周期更多是用于性能优化，而不是处理派生 state。<br> 截止这里，讲清为什么不能直接复制 prop 到 state。思考另一个问题，如果只使用 props 中的 email 属性更新组件讷？<br />
 
 在 props 变化后修改 state<br />
 
 接着上述示例，只使用<code>props.email</code>来更新组件，这样可以防止修改 state 导致的 bug<br />
 
 <blockquote><code>class EmailInput extends React.Component {
constructor(props) {
super(props);

this.state = {
email: this.props.email//初始值为props中email
};

}
componentWillReceiveProps(nextProps) {
if(nextProps.email !== this.props.email){
this.setState({ email: nextProps.email });
//email改变时，重新给state赋值
}
}
	//...
}
</code></blockquote><br />
 
 通过这个改造，组件只有在 props.email 改变时才会重新给 state 赋值，那这样改造会有问题吗？<br />
 
 在下列场景中，对拥有两个相同 email 的账号进行切换的时，这个输入框不会重置，因为父组件传来的 prop 值没有任何变化<br> 点击查看示例<br> 这个场景是构建出来的，可能设计奇怪，但是这样子的错误很常见。对于这种反模式来说，有两种方案可以解决这些问题。关键在于，任何数据，都要保证只有一个数据来源，而且避免直接复制它。<br />
 
 解决方案 
 完全可控的组件<br />
 
 从 EmailInput 组件中删除 state，直接使用 props 来获取值，将受控组件的控制权交给父组件。<br />
 
 <blockquote><code>function EmailInput(props){
	return <input onChange={props.onChange} value=https://www.it610.com/article/{props.email}/>
}
</code></blockquote><br />
 
 如果想要保存临时的值，需要父组件手动执行保存。<br />
 
 有 key 的非受控组件<br />
 
 让组件存储临时的 email state，email 的初始值仍然是通过 prop 来接受的，但是更改之后的值就和 prop 没有关系了<br />
 
 <blockquote><code>function EmailInput(props){
	const [email, setEmail] = useState(props.email)
	return <input value=https://www.it610.com/article/{email} onChange={(e) => setEmail(e.target.value)}/>
}
</code></blockquote><br />
 
 在之前的切换账号的示例中，为了在不同页面切换不同的值，可以使用<code>key</code>这个 React 特殊属性。当 key 变化时，React 会创建一个新的组件而不是简单的更新存在的组件(获取更多)。我们经常使用在渲染动态列表时使用 key 值，这里也可以使用。<br />
 
 <blockquote><code><EmailInput
	email={account.email}
	key={account.id}
/>
</code></blockquote><br />
 
 点击查看示例<br />
 
 每次 id 改变的时候，都会重新创建<code>EmailInput</code>，并将其状态重置为最近 email 值。<br />
 
 可选方案<br />
 
 <ol> 
<li>使用 key 属性来做，会使组件整个组件的 state 都重置。可以在<code>getDerivedStateFromProps</code>和<code>componentWillReceiveProps</code> 来观察 id 的变化，麻烦但是可行<br> 点击查看示例</li> 
 </ol> 
 <blockquote><code>class EmailInput extends Component {
state = {
email: this.props.email,
prevId: this.props.id
};
componentWillReceiveProps(nextProps) {
const { prevId } = this.state;

if (nextProps.id !== prevId) {
this.setState({
email: nextProps.email,
prevId: nextProps.id
});

}
}
// ...
}
</code></blockquote><br />
 
 <ol start="2"> 
<li>使用实例方法重置非受控组件<br> 刚刚两种方式，均是再有唯一标识值的情况下。如果在没有合适的<code>key</code>值时，也想要重新创建组件。第一种方案就是生成随机值或者递增的值当作<code>key</code>值，另一种就是使用示例方法强制重置内部状态<br> 父组件使用ref调用这个方法，点击查看示例</li> 
 </ol> 
 <blockquote><code>class EmailInput extends Component {
state = {
email: this.props.email
};
resetEmailForNewUser(newEmail) {
this.setState({ email: newEmail });

}// ...
}
</code></blockquote><br />
 
 那我们如何选 
 在我们的业务开发中，尽量选择受控组件，减少使用派生 state，过量的使用 componentWillReceiveProps 可能导致 props 判断不够完善，倒是重复渲染死循环问题。<br />
 
 在组件库开发中，例如 Ant Design，将受控与非受控的调用方式都开放给用户，让用户自主选择对应的调用方式。比如 Form 组件，我们常使用 getFieldDecorator 和 initialValue 来定义表单项，但是我们根本不关心中间的输入过程，在最后提交的时候通过 getFieldsValue 或者 validateFields 拿到所有的表单值，这就是非受控的调用方式。或者是，我们在只有一个 Input 的时候，我们可以直接绑定 value 和 onChange 事件，这也就是受控的方式调用。<br />
 
 总结 
 在本文中，首先介绍了非受控组件和受控组件的概念。对于受控组件来说，组件控制用户输入的过程以及 state 是受控组件唯一的数据来源。<br />
 
 接着介绍了组件的调用问题，对于组件调用方而言，组件提供方是否为受控组件。对于调用方而言，组件受控以及非受控的边界划分取决于当前组件对于子组件值的变更是否拥有控制权。<br />
 
 接着介绍了以非受控组件的方式调用受控组件这种反模式用法，以及相关示例。不要直接复制 props 到 state，而是使用受控组件。对于不受控的组件，当你想在 prop 变化时重置 state 的话，可以选择以下几种方式：<br />
 
 <ul> 
<li>建议: 使用<code>key</code>属性，重置内部所有的初始 state</li> 
<li>选项一：仅更改某些字段，观察特殊属性的变化(具有唯一性的属性)</li> 
<li>选项二：使用 ref 调用实例方法</li> 
 </ul> 
 <strong>【重新认识受控和非受控组件】</strong>最后总结了一下，应当如何选择受控组件还是非受控组件。<br />
 
 参考链接 
 <ul> 
<li>React 官网——受控组件</li> 
<li>React 官网——非受控组件</li> 
<li>controlled vs. uncontrolled form inputs</li> 
<li>Transitioning from uncontrolled inputs to controlled</li> 
<li>重新认识受控非受控组件</li> 
<li>你可能不需要使用派生 state</li> 
 </ul></p>
<div class="dede_pages"><ul></ul></div>
		  	<div class="pcd_ad">
<center><div class="_ahwullr0ac"></div>
    <script type="text/javascript">
        (window.slotbydup = window.slotbydup || []).push({
            id: "u6834461",
            container: "_ahwullr0ac",
            async: true
        });
    </script>
    <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" >
    </script></center>
</div>
<div class="mbd_ad">
<div style=margin-top:10px;margin-bottom:10px;>
<div class="_i7aftr79jl"></div>
    <script type="text/javascript">
        (window.slotbydup = window.slotbydup || []).push({
            id: "u5950612",
            container: "_i7aftr79jl",
            async: true
        });
    </script>
    <!-- ����������½ű�ֻ������һ�� -->
    <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" >
    </script>
</div>
</div>
<h3>推荐阅读</h3>
<ul class="post-loop post-loop-default cols-0">
           <li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/092524540H021.html" title="五味"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="五味" src="/images/defaultpic.gif"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/092524540H021.html"> <b>五味 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/3432679.html" title="激光能去除肥胖纹吗视频 激光能去除肥胖纹吗"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="激光能去除肥胖纹吗视频 激光能去除肥胖纹吗" src="http://img.readke.com/231112/211445BY-0-lp.jpg"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/3432679.html"> <b>激光能去除肥胖纹吗视频 激光能去除肥胖纹吗 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/1358282.html" title="原味烤肉制作方法 原味烤肉的制作方法"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="原味烤肉制作方法 原味烤肉的制作方法" src="http://img.readke.com/230330/1S43T054-0-lp.jpg"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/1358282.html"> <b>原味烤肉制作方法 原味烤肉的制作方法 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/1208258.html" title="房间里面有老鼠怎么办"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="房间里面有老鼠怎么办" src="/images/defaultpic.gif"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/1208258.html"> <b>房间里面有老鼠怎么办 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/2791996.html" title="有没有好点收益高的副业项目？"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="有没有好点收益高的副业项目？" src="http://img.readke.com/230721/1605542012-0-lp.jpg"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/2791996.html"> <b>有没有好点收益高的副业项目？ </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/1553099.html" title="年收入是指纯收入，年收入是什么意思"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="年收入是指纯收入，年收入是什么意思" src="http://img.readke.com/230414/12455231B-0-lp.jpg"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/1553099.html"> <b>年收入是指纯收入，年收入是什么意思 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/3478989.html" title="松下洗衣机烘干为什么出水,首先原因要搞清"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="松下洗衣机烘干为什么出水,首先原因要搞清" src="http://img.readke.com/231117/02450a295-0-lp.jpg"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/3478989.html"> <b>松下洗衣机烘干为什么出水,首先原因要搞清 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/4022161.html" title="读地图分析,如何读地图获取信息"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="读地图分析,如何读地图获取信息" src="/images/defaultpic.gif"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/4022161.html"> <b>读地图分析,如何读地图获取信息 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/09222363262021.html" title="3d|2千档高质价比手机推荐：骁龙870+三星屏+65W，真我真牛"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="3d|2千档高质价比手机推荐：骁龙870+三星屏+65W，真我真牛" src="https://p0.ssl.img.360kuai.com/t019e24248c87aa6afb.jpg"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/09222363262021.html"> <b>3d|2千档高质价比手机推荐：骁龙870+三星屏+65W，真我真牛 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/3015718.html" title="刑事自诉案件的范围是什么"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="刑事自诉案件的范围是什么" src="http://img.readke.com/230817/0020191008-0-lp.jpg"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/3015718.html"> <b>刑事自诉案件的范围是什么 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/1557311.html" title="生理盐水洗鼻子可以预防新冠肺炎吗"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="生理盐水洗鼻子可以预防新冠肺炎吗" src="/images/defaultpic.gif"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/1557311.html"> <b>生理盐水洗鼻子可以预防新冠肺炎吗 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/3224792.html" title="胚芽燕麦粥"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="胚芽燕麦粥" src="/images/defaultpic.gif"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/3224792.html"> <b>胚芽燕麦粥 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/2961133.html" title="辰辉的寓意"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="辰辉的寓意" src="http://img.readke.com/230809/03434AH5-0-lp.jpg"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/2961133.html"> <b>辰辉的寓意 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/3278191.html" title="健康工作远离疼痛现在要坐好"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="健康工作远离疼痛现在要坐好" src="http://img.readke.com/231026/1J03V0E-0-lp.jpg"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/3278191.html"> <b>健康工作远离疼痛现在要坐好 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/1114098.html" title="被子晒多久比较好"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="被子晒多久比较好" src="/images/defaultpic.gif"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/1114098.html"> <b>被子晒多久比较好 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/1257998.html" title="头孢料酒会有反应吗"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="头孢料酒会有反应吗" src="/images/defaultpic.gif"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/1257998.html"> <b>头孢料酒会有反应吗 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/1416092.html" title="鹌鹑鸟怎么养 鹌鹑鸟如何饲养"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="鹌鹑鸟怎么养 鹌鹑鸟如何饲养" src="http://img.readke.com/230405/2154331605-0-lp.jpg"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/1416092.html"> <b>鹌鹑鸟怎么养 鹌鹑鸟如何饲养 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/1858467.html" title="人成长分为哪些阶段"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="人成长分为哪些阶段" src="http://img.readke.com/230430/04530HA6-0-lp.jpg"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/1858467.html"> <b>人成长分为哪些阶段 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/1014354.html" title="如何鉴别建兰国魂真假 如何鉴别建兰国魂真假"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="如何鉴别建兰国魂真假 如何鉴别建兰国魂真假" src="http://img.readke.com/230216/16124230I-0-lp.jpg"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/1014354.html"> <b>如何鉴别建兰国魂真假 如何鉴别建兰国魂真假 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>
<li class="item">
              <div class="item-img"> <a class="item-img-inner" href="/c/3875598.html" title="回归模型结果分析方法,ABC态度模型分析方法和运用"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="回归模型结果分析方法,ABC态度模型分析方法和运用" src="/images/defaultpic.gif"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/3875598.html"> <b>回归模型结果分析方法,ABC态度模型分析方法和运用 </b></a></h4>
                <div class="item-meta">
                  <div class="item-meta-right"> </div>
                </div>
              </div>
            </li>

          </ul>
<p><br /><ul class="post-loop post-loop-list cols-4"><li><a href="/c/031JH4062022.html" title="Django基础二静态文件和ORM" target="_blank">Django基础二静态文件和ORM 
</a></li> <li><a href="/c/031JH3X2022.html" title="java|java基础-（一）-JDK的下载和安装" target="_blank">java|java基础-（一）-JDK的下载和安装 
</a></li> <li><a href="/c/031JH3A2022.html" title="[开发环境部署]OPenvino下载和安装教程" target="_blank">[开发环境部署]OPenvino下载和安装教程 
</a></li> <li><a href="/c/031JH3352022.html" title="哨兵|哨兵 双向 java_SpringCloud微服务（Sentinel哨兵组件，管理服务限流和降级）" target="_blank">哨兵|哨兵 双向 java_SpringCloud微服务（Sentinel哨兵组件，管理服务限流和降级） 
</a></li> <li><a href="/c/031JH3242022.html" title="r导入txt乱码_R学习笔记系列—R语言从文本和Excel文件中读取数据-excel打开是乱码..." target="_blank">r导入txt乱码_R学习笔记系列—R语言从文本和Excel文件中读取数据-excel打开是乱码... 
</a></li> <li><a href="/c/031JH3222022.html" title="算法|PyTorch中的squeeze()和unsqueeze()详解与应用案例" target="_blank">算法|PyTorch中的squeeze()和unsqueeze()详解与应用案例 
</a></li> <li><a href="/c/031JH3202022.html" title="#|动手学深度学习（3.14 正向传播、反向传播和计算图）" target="_blank">#|动手学深度学习（3.14 正向传播、反向传播和计算图） 
</a></li> <li><a href="/c/031JH3032022.html" title="leetcode刷题记录|两数之和II - 输入有序数组——LC167题（中等难度）" target="_blank">leetcode刷题记录|两数之和II - 输入有序数组——LC167题（中等难度） 
</a></li> <li><a href="/c/031JH2b2022.html" title="flutter学习(1)" target="_blank">flutter学习(1) 
</a></li> <li><a href="/c/03164H25H022.html" title="Lua中如何实现类似gdb的断点调试—09支持动态添加和删除断点" target="_blank">Lua中如何实现类似gdb的断点调试—09支持动态添加和删除断点 
</a></li> </ul></p>
            <div class=entry-copyright>
              <p></p>
            </div>
          </div>
          <div class="entry-footer">
    <div class="prev-next sb br mb clearfix">
      <p class="post-prev fl ellipsis">上一篇：<a href='/c/031JH4252022.html'>svn服务支持网页显示并增加在线预览功能，支持视频在线播放</a> </p>
      <p class="post-next fr ellipsis">下一篇：<a href='/c/031JH42R022.html'>中国PostgreSQL培训认证推出“浪潮K1 Power”认证课程</a> </p>
    </div>

          </div>
        </div>
      </article>
    </main>
    <aside class="sidebar">
      <div class="widget widget_post_thumb">
        <h3 class="widget-title"><span>更多...</span></h3>
        <ul>
          <li class="item">
            <div class="item-img"> <a class="item-img-inner" href="/c/031JH42R022.html" title="中国PostgreSQL培训认证推出“浪潮K1 Power”认证课程"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="中国PostgreSQL培训认证推出“浪潮K1 Power”认证课程" src="/images/defaultpic.gif"> </a></div>
            <div class="item-content">
              <p class="item-title"><a href="/c/031JH42R022.html" title="中国PostgreSQL培训认证推出“浪潮K1 Power”认证课程">中国PostgreSQL培训认证推出“浪潮K1 Power”认证课程</a></p>
            </div>
          </li>
<li class="item">
            <div class="item-img"> <a class="item-img-inner" href="/c/031JH4262022.html" title="重新认识受控和非受控组件"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="重新认识受控和非受控组件" src="/images/defaultpic.gif"> </a></div>
            <div class="item-content">
              <p class="item-title"><a href="/c/031JH4262022.html" title="重新认识受控和非受控组件">重新认识受控和非受控组件</a></p>
            </div>
          </li>
<li class="item">
            <div class="item-img"> <a class="item-img-inner" href="/c/031JH4252022.html" title="svn服务支持网页显示并增加在线预览功能，支持视频在线播放"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="svn服务支持网页显示并增加在线预览功能，支持视频在线播放" src="/images/defaultpic.gif"> </a></div>
            <div class="item-content">
              <p class="item-title"><a href="/c/031JH4252022.html" title="svn服务支持网页显示并增加在线预览功能，支持视频在线播放">svn服务支持网页显示并增加在线预览功能，支持视频在线播放</a></p>
            </div>
          </li>
<li class="item">
            <div class="item-img"> <a class="item-img-inner" href="/c/031JH4242022.html" title="详解Java对象结构与对象锁的升级"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="详解Java对象结构与对象锁的升级" src="/images/defaultpic.gif"> </a></div>
            <div class="item-content">
              <p class="item-title"><a href="/c/031JH4242022.html" title="详解Java对象结构与对象锁的升级">详解Java对象结构与对象锁的升级</a></p>
            </div>
          </li>
<li class="item">
            <div class="item-img"> <a class="item-img-inner" href="/c/031JH4232022.html" title="C语言自定义类型超详细梳理之结构体|C语言自定义类型超详细梳理之结构体 枚举 联合体"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="C语言自定义类型超详细梳理之结构体|C语言自定义类型超详细梳理之结构体 枚举 联合体" src="/images/defaultpic.gif"> </a></div>
            <div class="item-content">
              <p class="item-title"><a href="/c/031JH4232022.html" title="C语言自定义类型超详细梳理之结构体|C语言自定义类型超详细梳理之结构体 枚举 联合体">C语言自定义类型超详细梳理之结构体|C语言自定义类型超详细梳理之结构体 枚举 联合体</a></p>
            </div>
          </li>
<li class="item">
            <div class="item-img"> <a class="item-img-inner" href="/c/031JH4222022.html" title="一文教你MySQL如何优化无索引的join"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="一文教你MySQL如何优化无索引的join" src="/images/defaultpic.gif"> </a></div>
            <div class="item-content">
              <p class="item-title"><a href="/c/031JH4222022.html" title="一文教你MySQL如何优化无索引的join">一文教你MySQL如何优化无索引的join</a></p>
            </div>
          </li>
<li class="item">
            <div class="item-img"> <a class="item-img-inner" href="/c/031JH4212022.html" title="Java|Java Spring的使用注解开发详解"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="Java|Java Spring的使用注解开发详解" src="/images/defaultpic.gif"> </a></div>
            <div class="item-content">
              <p class="item-title"><a href="/c/031JH4212022.html" title="Java|Java Spring的使用注解开发详解">Java|Java Spring的使用注解开发详解</a></p>
            </div>
          </li>
<li class="item">
            <div class="item-img"> <a class="item-img-inner" href="/c/031JH4202022.html" title="MyBatisPlus代码生成器的使用示例"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="MyBatisPlus代码生成器的使用示例" src="/images/defaultpic.gif"> </a></div>
            <div class="item-content">
              <p class="item-title"><a href="/c/031JH4202022.html" title="MyBatisPlus代码生成器的使用示例">MyBatisPlus代码生成器的使用示例</a></p>
            </div>
          </li>
<li class="item">
            <div class="item-img"> <a class="item-img-inner" href="/c/031JH4192022.html" title="ReentrantReadWriteLock不能锁升级的原因总结"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="ReentrantReadWriteLock不能锁升级的原因总结" src="/images/defaultpic.gif"> </a></div>
            <div class="item-content">
              <p class="item-title"><a href="/c/031JH4192022.html" title="ReentrantReadWriteLock不能锁升级的原因总结">ReentrantReadWriteLock不能锁升级的原因总结</a></p>
            </div>
          </li>
<li class="item">
            <div class="item-img"> <a class="item-img-inner" href="/c/031JH4162022.html" title="SpringBoot4.5.2|SpringBoot4.5.2 整合HikariCP 数据库连接池操作"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="SpringBoot4.5.2|SpringBoot4.5.2 整合HikariCP 数据库连接池操作" src="/images/defaultpic.gif"> </a></div>
            <div class="item-content">
              <p class="item-title"><a href="/c/031JH4162022.html" title="SpringBoot4.5.2|SpringBoot4.5.2 整合HikariCP 数据库连接池操作">SpringBoot4.5.2|SpringBoot4.5.2 整合HikariCP 数据库连接池操作</a></p>
            </div>
          </li>

        </ul>
      </div>
	
	
    </aside>
  </div>
</div>
<footer class="footer">
  <div class="container">
    <div class="clearfix">
      <div class="footer-col footer-col-logo"> <!--<img src="/skin/images/logo-footer.png">--></div>
      <div class="footer-col footer-col-copy">
        <ul class="footer-nav hidden-xs">
          <li class="menu-item menu-item-706"><a href="/baike/">生活百科</a></li>
          
          <li class="menu-item menu-item-706"><a href="/it/">it技术</a></li>
		  
        </ul>
        <div class="copyright">
          <p>Copyright © 2017-2022 锐客网 <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow">京ICP备11041112号-41</a> </p>
        </div>
      </div>
      <div class="footer-col footer-col-sns">
        <div class="footer-sns"> </div>
      </div>
    </div>
  </div>
</footer>
<div class="action action-style-0 action-color-0 action-pos-1" style="bottom:15%;">
  <div class="action-item gotop j-top"> <i class="web-icon wi action-item-icon"><svg aria-hidden="true">
    <use xlink:href="#wi-arrow-up-2"></use>
    </svg></i></div>
</div>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?79e4e485d34c6fc717489eaa10b314e3";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
</div>
<script>var _web_js={};</script> 
<script src="/skin/js/index.js"></script>
</body>
</html>