React学习(1)--不断修正 更新
2017-11-9
技术栈：React+antd+mobx+less
语法：javaScript - ES6
心得:
1- 一切皆组件
2- 父组件通过props向子组件传递数据，子组件可以通过store向父组件传递（暴露）数据（属性 方法）
3- 组件内通讯可以使用this
4- 三个通讯兵：this props store
4-ps: ref是用来指向一个组件（或者DOM元素（无论是否虚拟）的）
5- mobx状态管理： @observable 修饰被观察的对象 @observer 修饰观察者 @action 修饰用来改变store中的值的方法
2017-11-12
1- 回调是个好东西，可以实现组件内的方法通过自身的store暴露出去给父组件：
操作是(例如要吧component中的b()暴露出去)：
1） 在store中定义一个空函数 a = () => {}
2） 在component的生命周期函数：componentWillMount()中把b赋值给自身store中的a
const { store } = this.props；
store.a = this.b;
-------------2017-11-14-START 增长点：loading设计理念的使用 mobx严格模式下的@abservable变量的修改 ！！对于变量值的作用 原生React的初步学习-------------------
[原生React]
1- 方法：从组件中来 const { 方法 } = 组件（或组件store）;
当然，除了js的原生方法使全局的
2- 回调是异步操作的一种
[技术栈]
1- loading理念的使用：
loading是一个值，用来反映子组件（组件，反映给组件自身也可以）的加载状态，设计上属于子组件向父组件专递状态的一类值。
1) 在子组件中定义一个loading的值，一般为boolean型
2) 在一些涉及到后台读取 加载等需要耗时的地方来修改这个值来反映加载的状态
（ 正在加载(赋值语句一般放在加载函数的开头)： loading=true;
加载完毕(赋值语句一般放在加载函数的末尾)：loading=false ）
3) 父组件监控这个值（可利用 state 或者 mobx 中的@computed）
并实时做出渲染（例如 loading=true; 就有loading的图标，loading=true; loading的图标消失，代表加载完成 ）
[mobx]是一种状态管理:
1- 严格模式下：@observable修饰的变量，只能用@action修饰的方法进行修改
2- 所以：store中@observable修饰的变量 需要有一个@action setValue()来作为修改这些被观测变量的方法。
3- action只能影响正在运行的函数，而无法影响当前函数调用的异步操作：
{我的理解： 也就是说 严格模式下 在异步操作中 对@observable修饰的观测对象的修改是不允许的 }
[例子]--------------START--------------
看下例的第六步，action无法影响当前函数调用的异步操作，而这个回调毫无疑问是一个异步操作，所以必须{再}用一个action来包裹住它，这样程序才不会报错
@action createRandomContact() {
this.pendingRequestCount++;
superagent
.get('https://randomuser.me/api/')
.set('Accept', 'application/json')
.end(action("createRandomContact-callback", (error, results) => {
if (error)
console.error(error);
else {
const data = JSON.parse(results.text).results[0];
const contact = new Contact(this, data.dob, data.name, data.login.username, data.picture);
contact.addTag('random-user');
this.contacts.push(contact);
this.pendingRequestCount--;
}
}));
}
作者：绯色流火
链接：http://www.jianshu.com/p/505d9d9fe36a
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
--------------------END-----------------------
4- 也可以用runInAction(() => { 需要进行的对被管测量的异步操作，例如向后台的异步请求 })，runInAction 是 action(fn) 的 一个语法糖
[例子]-------------START----------------------
如果你使用async function来处理业务，那么我们可以使用runInAction这个API来解决之前的问题。
import {observable, action, useStrict, runInAction} from 'mobx';
useStrict(true);
class Store {
@observable name = '';
@action load = async () => {
const data = await getData();
runInAction(() => {
this.name = data.name;
});
}
}
你可以把runInAction有点类似action(fn)()的语法糖，调用后，这个action方法会立刻执行
作者：绯色流火
链接：http://www.jianshu.com/p/505d9d9fe36a
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
----------------END--------------------------
相关代码段：
}).catch(error => {
Logger.httpError(error);
//因为涉及@observable观测量的修改 所以需要runInAction
runInAction(() => this.loading = false);
});
5- 改进：
严格模式下，更能保证自己的一些被观测值不会被乱修改：
1）store中的@observable修饰的值一般暴露一个@action setValue()来进行修改，不要通过store暴露出@observable 修饰的值 并被直接修改
2）关于异步（例如有的回掉 或者 异步请求后的回掉）中对于@abservable 的值修改 可以用 action(fn) 或者 runInAction()来对这些修改动作进行包裹
6-
----------------摘录:START--------------------------
关于程序中的！！
var o={flag:true}; var test=!!o.flag;//等效于var test=o.flag||false; alert(test);
由于对null与undefined用!操作符时都会产生true的结果，
所以用两个感叹号的作用就在于，
如果明确设置了o中flag的值（非 null/undefined/0""/等值），自然test就会取跟o.flag一样的值；
如果没有设置，test就会默认为false，而不是 null或undefined。
出处：“拂晓，仙人”的博客：https://www.cnblogs.com/iampoet/archive/2013/01/12/2857598.html，个人参考笔记，如有侵权，请作者联系下哈哈
----------------摘录:END--------------------------
PS:个人感觉在使用中最好把！！处理的值打印一下，看下，我在这边用的时候，！！a = true;
[原生React学习]
1- 以VScode打开一个react-app工程：在该工程目录下，右键-->Git Bash here-->输入code .
2- 组件的state同样也能被传入到子组件中作为子组件prop的值。
你需要明确的就是在React当中整个数据流都是向下传递的，包括路由、数据层、各个组件等等，从整个应用的state中来并汇聚到一起。
3- 一般React应用当中的绝大多数数据都是prop，只有当用户输入内容时才会使用state来处理。
4- 方法constructor，我们一般会在其中初始化state并做一些方法的绑定。
5- 因为学习React更主要的目的是学习如何编程和它的构建理念，而不是死记硬背一些无聊的API方法。
6- 高阶组件：理解为一个工厂方法，你可以传入一个组件并得到一个HOC返回的附加了更多功能的新组件。HOC不能直接在render方法中调用。
7- 数据流总是从父组件到子组件，除state可以通过调用方法修改之外。
8- 区分处理UI和数据逻辑的组件是一种很好的开发实践。
9- 高阶组件函数可以传入一个组件并为其赋予更多功能。
[九宫格小例子]
https://react.bootcss.com/react/tutorial/tutorial.html
1- onClick={() => alert('click')} 注意到这里我们传给 onClick属性的是一个函数方法，假如我们写的是 onClick={alert('click')} 警示框是会立即弹出的。
2- 在使用 JavaScript classes 时，你必须调用 super(); 方法才能在继承父类的子类中正确获取到类型的 this 。
3- 代码构建：状态提升
“当你遇到需要同时获取多个子组件数据，或者两个组件之间需要相互通讯的情况时，把子组件的 state 数据提升至其共同的父组件当中保存。
之后父组件可以通过 props 将状态数据传递到子组件当中。这样应用当中的状态数据就能够更方便地交流共享了。”
4- 不可变性在 React 当中的重要性。
1）改变应用数据的方式一般分为两种。第一种是直接修改已有的变量的值。第二种则是将已有的变量替换为一个新的变量。
2）好处：
--很轻松地实现 撤销/重做以及时间旅行
--在 React 当中判定何时重新渲染
--记录变化
5- 对于对象而言：浅复制复制的是数组（对象）的地址 深复制的思想是靠算法递归拷贝其内容（则地址不同）
6- 单一变量不存在深浅复制的区别：实际中的变量之间的赋值则是拷贝内容，地址不同
-----------------------------------2017-11-14-END--------------------------------------------------------------------
----2017-11-15-BEGIN:增长点：&&的链式编程 mobx的项目安装 mobx中的@observer export中的default obj.assign() 函数组件 antd+react：组件树 表单容错------
1- A && B && C
当A为true 则执行B 接着 当B为true时 则执行C
[nodejs npm]
1- 工具类的装成全局的,例如 npm install -g webpack
2- 项目的依赖装在项目(本地)中：npm install mobx --save-dev
3- 安装项目依赖库：
1- cmd/gitBash/VScode的终端：进入项目的根目录下安装：npm install mobx --save-dev 或者 npm install mobx-react --save(用这个就可以了)
2- 运行时需要用到的包使用--save，否则使用--save-dev。
3- mobx-react中的 @observer 使组件成为了观察者
[React]
1- 暴露类export default router; 由于default的修饰，
则引入时：import userRouter from './user';，可以不按原组件名命名
2- 设计原则1：避免使用 ref
使用父组件的 state 控制子组件的状态而不是直接通过 ref 操作子组件
[九宫格小例子]
1- var nObj = Object.assign({},obj,obj1);//花括号叫目标对象，后面的obj、obj1是源对象。
对象合并是指：将源对象里面的属性添加到目标对象中去，若两者的属性名有冲突，后面的将会覆盖前面的
2- 函数组件：
React 专门为像 Square 组件这种只有 render 方法的组件提供了一种更简便的定义组件的方法： 函数定义组件 。
只需要简单写一个以 props 为参数的 function 返回 JSX 元素就搞定了。
[antd-Form]
1- React的组件可以是一个组件树，从根组件开始渲染实际DOM：
ReactDOM.render(<RootComponent/>);
2- 表单中的”校验“+”容错“ -- 更友好的用户体验
-----------------2017-11-16-END-------------------------------------------------------------------------------------------------------------------------
---------2017-11-17-BEGIN------------
[antd]
1- 写提示的一个处理手法，可以记录下，后续可以参考 改进--加入逻辑得字符串拼接：
//加个提示
// let msg = !!regexpName === false ? ' \"名称\" ' : '';
// msg += !!regexpDesc === false ? ' \"描述\" ' : '';
// msg += !!regexpExp === false ? ' \"正则表达式\" ' : '';
// Notification.warn({ title: '信息不全', message: '请补全' + msg + '的信息', autoClose: 2 });
---------2017-11-17-END--------------
----------------------BEGIN:2017-11-21 状态提升-----------------------
[React - 九宫格游戏]
1- 状态提升：是基于单向数据绑定（数据只能从父组件流向子组件）的数据管理方法。
2- 所谓的回调：就是定义在A组件，调用在B组件。且调用者可以向回调函数传参。me:可以用于沟通两个组件的一些信息。
----------------------END:2017-11-21 ---------------------------------
----------------BEGIN：2017-11-22----------------------------
[React-九宫格]
1- 渲染发生的时机：
·初始化页面时（刷新页面时）
·state改变时
2- 渲染是有层次的，父组件渲染，引起子组件渲染
3- 重复元素的渲染：
·在 React 当中渲染多个重复的项目时，我们一般都以数组的方式传递 React 元素。
最基本的方法是使用数组的 map 方法，我们试着来修改 Game 组件的 render 方法吧
4- 关于React中的key:
·key 是 React 当中使用的一种特殊的属性（除此之外还有 ref 属性）。
当元素被创建时，React 会将元素的 key 值和对应元素绑定存储起来。
尽管 key 看起来像是 props 的一部分，可是事实上我们无法通过 this.props.key 获取到 key 的值。
React 会自动的在判断元素更新时使用 key ，而组件自己是无法获取到 key 的
5- 强烈建议你在渲染列表项时添加 keys 值。
·假如你没有现成可以作为唯一 key 值的数据使用的话，你可能需要考虑重新组织设计你的数据了。
6- 假如你不提供任何 key 值，React 会提示警告，并且默认使用数组的索引作为默认的 key ，
·但这样你想在列表的中间添加或删除项目，对应的键值都会改变（也就会出现我们上面提到的组件key值被改变就会被当作新创建的组件处理那种情况）。
·手动添加列表索引值 key={i} 可以消除警告，但也会存在相同的问题。
·组件的 keys 值并不需要在全局都保证唯一，只需要在当前的节点里保证唯一即可。
----------------END：2017-11-22------------------------------
-------------------------BEGIN:2017-11-23---------------------------
[npm学习]
1-
·npm install <name> -g 将包安装到全局环境中
·但是代码中，直接通过require()的方式是没有办法调用全局安装的包的。全局的安装是供命令行使用的
2-
·npm install <name> --save
安装的同时，将信息写入package.json中项目路径中如果有package.json文件时，
直接使用npm install方法就可以根据dependencies配置安装所有的依赖包，
这样代码提交到github时，就不用提交node_modules这个文件夹了
[create-react-app]
1- create-react-app:最好是用npm装一个自家的yarn，这样容易拉去
-------------------------END:2017-11-23-----------------------------
----------------------2017-11-28：BEGIN:学习需要有始有终-------消化知识的一个方法是把它用自己的语言描述出来-----------------
1- 新笔记本
2- 昨天处理的那一句代码
··利用``来读取一个变量（值为字符串）的值
·label={`${label}：`
[React-官方文档学习]
1- 根据我们以往的经验，将界面视为一个个特定时刻的固定内容（就像一帧一帧的动画），
而不是随时处于变化之中（而不是处于变化中的一整段动画）将会有利于我们理清开发思路，减少各种bugs.
2- 函数定义组件：就是把props 当作参数传进来、书写格式类似于javascript函数、return一个元素的函数（或组件）。
·function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
3- 提取组件-构建复用组件：
·组件本身比较复杂的部分
·重复出现的部分
4- 组件本身不能修改自己的props。
5- 状态与属性十分相似，但是状态是私有的，完全受控于当前组件。
----------------------2017-11-28：END:学习需要有始有终------------------------
----------------------2017-12-4-BEGIN----------------------------------------------------------------
1-JavaScript语言对异步编程的实现，就是回调函数。
所谓回调函数，就是把任务的第二段单独写在一个函数里面，等到重新执行这个任务的时候，就直接调用这个函数。
它的英语名字callback，直译过来就是"重新调用"。
2- async函数返回的Promise对象，必须等到内部所有await命令的Promise对象执行完，才会发生状态改变。
也就是说，只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数。
----------------------2017-12-4-END----------------------------------------------------------------
----------------------------2017-12-5-BEGIN:解耦----------------------------------------------------------------------------------
1-解耦方法的了解
·提供不易变的接口
··适配器+接口
·中间件
·观察者模式
·设计的核心思想：
尽可能减少代码耦合，如果发现代码耦合，就要采取解耦技术。
让数据模型，业务逻辑和视图显示三层之间彼此降低耦合，把关联依赖降到最低，而不至于牵一发而动全身。
原则就是A功能的代码不要写在B的功能代码中，如果两者之间需要交互，可以通过接口，通过消息，甚至可以引入框架，
但总之就是不要直接交叉写。
2- 关于解耦（me）：
这个方法里面调用了多个子组件store中的方法 为了解耦 可以把这个方法作为一个接口写在子组件中 这样只需要在子组件中修改一次即可
----------------------------2017-12-5-END:解耦----------------------------------------------------------------------------------
posted on 2017-11-09 21:03 BlueStone_Q 阅读(475) 评论(0) 收藏 举报
浙公网安备 33010602011771号