React精髓 读书笔记 错误与修正

第29页 由于2022年babel已经更新到了10.0， 所以需要按照译者的附注更新，但是按照附注进行更新之后仍然gulp报错，所以有了如下操作

第一，先将core.js升级到3以上版本（这一步不知道是不是必须）

npm install -g core-js@3.1.1
npm i core-js

直接运行第二步不知道为什么失败，所以我先提升到3，然后再提升到最新版本

第二，根据babel官网，运行

npm install --save-dev @babel/preset-react

这段和译者注略有出入

修改json也是

 .transform(babelify, {presets:["@babel/preset-react"]})

略有出入，记录一下

---

40页(第33页) createClass已经被废弃 需要用

class ReactClass extends React.Component 来代替

不然每次index.html都有问题 而且又不告诉你错误出在哪里 

最终修改的版本是：

class ReactClass extends React.Component{
        constructor(props){
                super(props);
                this.state={
                        isHeaderHidden : false,
                        title:"Try this"
                }
        }

        handleClick=()=>{
                this.setState({
                        isHeaderHidden:!this.state.isHeaderHidden
                });
        }
        render(){
                var headerElement = React.createElement("h1",{className:'header',
        key:'header'}, this.state.title);
                var buttonElement = React.createElement("button",{className:'btn-default',
                onClick:this.handleClick, key:'button'}, 'ToggleHeader');
                if(this.state.isHeaderHidden){return React.createElement('div', null, buttonElement);}
                        
                return React.createElement('div', null ,[buttonElement, headerElement]);
        }
        /*
        render:function(){
                return React.createElement('h2',{className:'header'}, "test1");
        }*/
}

需要注意的是 如果handleClick不用lambda函数的话，没法绑定在this上，这个要感谢之前看过的b站教学视频 不然的话 需要在constructor中进行绑定

this.handleClick = this.handleClick.bind(this)

才可以，原理我暂时还没想起来

---

第74页

componentWillReceiveProps()

componentWillMount()

componentWillUpdate()

已经被舍弃

---

React小经验：

1. 经验法则：组件的state应该用来存储组件的事件处理函数随时可能改变的数据，以达到重新渲染组件并保持组件的用户界面最新的目的。将state对象中组件的状态保持到最小可能表现形式。state中放了什么，要自己更新。render()中的React会更新
2. 记住React是一个用户界面库，因此所有和用户界面以及用户交互的任务都可以用React解决。比如数据获取，与用户界面无关，就要用其他库来解决
3. 规划React应用时应该遵循下面两条最简单的原则：

•    单个React组件应该代表一个用户界面元素，封装最小的可用元素
• 多个React组件应该组合成一个独立的React组件，最终，整个用户界面应该封装成一个React组件

4.  在React中，至少应该有一个组件来封装应用程序的逻辑、存储并管理应用程序的state。这个组件通常是根组件或者组件层级中较高级别的组件。如果可能，其他React子组件都不需要state。如果把所有的React组件都看成视图(View）, 高级组件就是一个控制器视图（ControllerView）

5.在循环创建子组件时，要有独立的key值，这样更新的时候可以提高渲染的速度