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

作者：霜序
校稿：袋鼠云数栈前端团队运营小组
该文章包含如下内容
受控与非受控组件
- 非受控组件
- 受控组件
受控和非受控组件边界
反模式
解决方案
前言在 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/3318175.html" title="三星手机s6的返回键灯怎么开 三星s6edge返回键不亮怎么办"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="三星手机s6的返回键灯怎么开 三星s6edge返回键不亮怎么办" src="http://img.readke.com/231030/21213T562-0-lp.jpg"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/3318175.html"> <b>三星手机s6的返回键灯怎么开 三星s6edge返回键不亮怎么办 </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/0ZGC0W2021.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/0ZGC0W2021.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/1062193.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/1062193.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/1896535.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/1896535.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/963670.html" title="脚印怎么画 脚印简笔画教程"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="脚印怎么画 脚印简笔画教程" src="http://img.readke.com/230213/111PL316-0-lp.jpg"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/963670.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/02154530112022.html" title="Python+树莓派制作IoT（物联网）门控设备"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="Python+树莓派制作IoT（物联网）门控设备" src="/images/defaultpic.gif"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/02154530112022.html"> <b>Python+树莓派制作IoT（物联网）门控设备 </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/2048973.html" title="东西热的可以放冰箱吗 东西热的能放冰箱吗?"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="东西热的可以放冰箱吗 东西热的能放冰箱吗?" src="http://img.readke.com/230512/1F4311K0-0-lp.jpg"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/2048973.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/2907437.html" title="踏板摩托车风门在哪"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="踏板摩托车风门在哪" src="http://img.readke.com/230801/204G61364-0-lp.jpg"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/2907437.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/4166019.html" title="mysql怎么修改数据库名称 mysql数据库中怎么修改数据表名"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="mysql怎么修改数据库名称 mysql数据库中怎么修改数据表名" src="/images/defaultpic.gif"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/4166019.html"> <b>mysql怎么修改数据库名称 mysql数据库中怎么修改数据表名 </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/2814132.html" title="cdr符号怎么还原对象"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="cdr符号怎么还原对象" src="http://img.readke.com/230723/14462052V-0-lp.png"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/2814132.html"> <b>cdr符号怎么还原对象 </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/2296649.html" title="0x000007b蓝屏修复方法"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="0x000007b蓝屏修复方法" src="http://img.readke.com/230528/113A96332-0-lp.jpg"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/2296649.html"> <b>0x000007b蓝屏修复方法 </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/3097234.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/3097234.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/573802.html" title="无货源开店骗局 重庆做电商有什么合适做的货源，无货源电商"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="无货源开店骗局 重庆做电商有什么合适做的货源，无货源电商" src="http://img.readke.com/220422/0A453K62-0-lp.jpg"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/573802.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/1922777.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/1922777.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/0S11192C2021.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/0S11192C2021.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/01054115G2022.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/01054115G2022.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/1481717.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/1481717.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/3324032.html" title="大学生用口红一般什么价位,有什么好推荐的吗？"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="大学生用口红一般什么价位,有什么好推荐的吗？" src="http://img.readke.com/231031/15191MK9-0-lp.jpg"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/3324032.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/2449217.html" title="描写祖国风光的句子诗句 描写祖国风光的句子"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="描写祖国风光的句子诗句 描写祖国风光的句子" src="http://img.readke.com/230606/2036134013-0-lp.jpg"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/2449217.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/2456638.html" title="抖音天天摔轮胎的人是谁？抖音天天摔轮胎是什么梗"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="抖音天天摔轮胎的人是谁？抖音天天摔轮胎是什么梗" src="http://img.readke.com/230607/16023T1M-0-lp.jpg"> </a> </div>
              <div class="item-content">
                <h4 class="item-title"> <a href="/c/2456638.html"> <b>抖音天天摔轮胎的人是谁？抖音天天摔轮胎是什么梗 </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>