Search
15 | React.render( 16 | , 17 | document.getElementById('container') 18 | ); 19 |
21 | var HelloWorld = React.createClass({ 22 | render: function() { 23 | return ( 24 | Hello, {this.props.name} 25 | ); 26 | } 27 | }); //通过this.props.name就可以获取name属性值啦 28 |
<--!a href="http://facebook.github.io/react/"-->Hello!
React.createElement('a', {href: 'http://facebook.github.io/react/'}, 'Hello!')
render(ReactElement,元素 50 | DomElement,要被元素替换的容器 51 | [回调函数]，这个是可选的，如果选择了，那么就在元素被渲染后开始执行 52 | ) 53 |
this.state = { inputStr: ''//设置新状态以便动态获取input里的值}
return item.toLowerCase().indexOf(inputStr.toLowerCase()) >= 0//将输入的字符串与数据字符串化为小写进行比较（避免了因为大小写的问题而导致没有匹配出来）//如果匹配后发现确实存在，那么就返回伪数据数组里这个字符串进tips
; 348 | }, 349 | handleClick: function(param, event) { 350 | // handle click 351 | } 352 | 353 | ##State 354 | 355 | React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。 356 | 357 | 常用的通知 React 数据变化的方法是调用 setState(data, callback)。这个方法会合并（merge） data 到 this.state，并重新渲染组件。渲染完成后，调用可选的 callback 回调。大部分情况下不需要提供 callback，因为 React 会负责把界面更新到最新状态。 358 | 359 | ###哪些组件应该有State？ 360 | 361 | 大部分组件的工作应该是从 props 里取数据并渲染出来。但是，有时需要对用户输入、服务器请求或者时间变化等作出响应，这时才需要使用 State。 362 | 363 | **尝试把尽可能多的组件无状态化。** 这样做能隔离 state，把它放到最合理的地方，也能减少冗余，同时易于解释程序运作过程。 364 | 365 | 常用的模式是创建多个只负责渲染数据的无状态（stateless）组件，在它们的上层创建一个有状态（stateful）组件并把它的状态通过 props 传给子级。这个有状态的组件封装了所有用户的交互逻辑，而这些无状态组件则负责声明式地渲染数据。 366 | 367 | ###哪些不应该作为State？ 368 | 369 | this.state 应该仅包括能表示用户界面状态所需的最少数据。因此，它不应该包括： 370 | 371 | - 计算所得数据：不要担心根据 state 来预先计算数据 —— 把所有的计算都放到 render() 里更容易保证用户界面和数据的一致性。 372 | 373 | 374 | > 例如，在 state 里有一个数组（listItems），我们要把数组长度渲染成字符串， 直接在 render() 里使用 this.state.listItems.length + ' list items' 比把它放到 state 里好的多。 375 | 376 | 377 | - React 组件： 在 render() 里使用当前 props 和 state 来创建它。 378 | - 基于 props 的重复数据： 尽可能使用 props 来作为惟一数据来源。把 props 保存到 state 的一个有效的场景是需要知道它以前值的时候，因为未来的 props 可能会变化。 379 | 380 | 381 | 382 | 383 | 384 | 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 | -------------------------------------------------------------------------------- /practice/wuhuizhong/3/个人总结.md: -------------------------------------------------------------------------------- 1 | ##个人总结 2 | 3 | 笔记塞得东西太多，这个写的就是精简的个人理解 4 | 5 | - import 6 | 7 | 用于从别的文件中导入变量（？），对应使用export 8 | 9 | - bind 10 | 11 | 生成一个新的函数，并且不会立马调用。第一个参数也是绑定 this 的值，后面接受传递给函数的不定参数。 bind() 生成的新函数返回后，想什么时候调就什么时候调。 12 | 13 | - this.props 14 | 15 | 这个组件的输入被称为 props - "properties"的缩写。它们通过 JSX 语法进行参数传递。你必须知道，**在组件里这些属性是不可直接改变的**，也就是说 **this.props** 是**只读**的 16 | 17 | - this.states 18 | 19 | 放置需要动态调用的数据，类似一个状态机。React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。 20 | 21 | - this.setState 22 | 23 | 常用的通知 React 数据变化的方法是调用 setState(data, callback)。这个方法会合并（merge） data 到 this.state，并重新渲染组件。渲染完成后，调用可选的 callback 回调。大部分情况下不需要提供 callback，因为 React 会负责把界面更新到最新状态。 24 | 25 | - JSX 26 | 27 | 一个可以通过 JavaScript 直接生成模板，可选类似 HTML 语法 ，通过函数调用即可生成模板的编译器。 28 | 29 | - render 30 | 31 | React组件通过一个 render() 方法，接受输入的参数并返回展示的对象。 -------------------------------------------------------------------------------- /practice/yuwei/1/answer.js: -------------------------------------------------------------------------------- 1 | // 1.将数字字符串:'123'转化为数字：123： 2 | var str = '123'; 3 | var number = parseInt(str, 10); 4 | console.log(number); 5 | 6 | // 2.使用Number函数将数字字符串数组：['1','2']转化为数字数组：[1,2]: 7 | var array = ['1','2']; 8 | var numberArray = array.map(Number); 9 | console.log(numberArray); 10 | 11 | //3.将集合转化为真正的数组 12 | var childCollection = document.querySelectorAll('div'); 13 | var childs = Array.prototype.slice.call(childCollection); 14 | 15 | //4.写一个spacify函数，使得spacify('hello world')，返回'h e l l o w o r l d' 16 | function spacify(str){ 17 | var newStr = str.replace(/\s/g,'').split('').join(' '); 18 | console.log(newStr); 19 | return newStr; 20 | } 21 | spacify('hello world'); //'h e l l o w o r l d' 22 | 23 | //5.写一个函数，将英文字符串重新按照字母排序，比如cba，返回abc 24 | function sortStr(str){ 25 | var sortedStr = Array.prototype.slice.call(str).sort().join(''); 26 | console.log(sortedStr); 27 | return sortedStr; 28 | } 29 | sortStr('cbdae'); //abcde 30 | 31 | //6.var a = ['a', 'b', 'c', 'd']，每过1秒log一下数组中的值（闭包） 32 | function logEverySecond(){ 33 | var a = ['a', 'b', 'c', 'd']; 34 | for (var i = 0; i < a.length; i++) { 35 | (function(j){ 36 | setTimeout(function(){ 37 | console.log(a[j]); 38 | }, j * 1000); 39 | })(i); 40 | } 41 | } 42 | logEverySecond(); 43 | 44 | //7.定义log，然后它可以代理console.log的方法（使用apply） 45 | function log(){ 46 | console.log.apply(console, arguments); 47 | } 48 | log('sss'); 49 | 50 | //8.写出打印的输出（this指向） 51 | var User = { 52 | count: 1, 53 | 54 | getCount: function(){ 55 | return this.count; 56 | } 57 | }; 58 | 59 | console.log(User.getCount()); //1，this指向User，打印User.count 60 | 61 | var func = User.getCount; 62 | console.log(func()); //undefined 63 | -------------------------------------------------------------------------------- /practice/yuwei/2-autoSuggest/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |