Reactの詳細
12014 ワード
元コースリンク->React 16.4開発簡書プロジェクトゼロベースから実戦へ
第4章Reactプレミアムコンテンツ
4-1 React developer toolsのインストールと使用チュートリアル:(ChromeブラウザでReact Developer Toolsをインストール) 4-2 PropTypeとDefaultPropsの応用 PropTypeの使用 defaultPropsの使用 これらの属性について-公式サイト 4-3 props,stateとrender関数の関係コンポーネントのstateまたはpropsが変更されるとrender関数が再実行され、コンポーネントが 再レンダリングされます.親コンポーネントのrender関数が実行されると、そのサブコンポーネントのrender関数は に再実行されます.
4-4 Reactでの仮想DOM仮想DOMがないとしたら、どうすればいいですか?
4-5仮想DOMの詳細コードに戻り、前のJSX を説明する
第4章Reactプレミアムコンテンツ
4-1 React developer toolsのインストールと使用
// 1.
import PropTypes from 'prop-types';
// 2: -> TodoItem
TodoItem.propTypes = {
// 3. notest， notest ,
notest: PropTypes.string,
// 4. test， test ， ， "isRequired"
test: PropTypes.string.isRequired,
// content ，
content: PropTypes.arrayOf(PropTypes.number, PropTypes.string),
deleteItem: PropTypes.func,
index: PropTypes.number,
}
export default TodoItem
// 5. test
TodoItem.defaultProps = {
test: 'hello world',
}
4-4 Reactでの仮想DOM
1：
1. state
2. JSX
3. + ， DOM，
4. state
5. + ， DOM， DOM
：
DOM ，
DOM
DOM DOM，
2：
1. state
2. JSX
3. + ， DOM，
4. state
5. + ， DOM， DOM
6. DOM(DocumentFragment： ， ， ) DOM ，
7. input
8. DOM input ， DOM input
：
， ， 1 DOM ， DOM
3：
1. state
2. JSX
3. DOM ( DOM JS ， DOM) ( ， )
['div', {id: 'abc'}, ['span', {}, 'hello world']]
[' ', { : }, ]
4. DOM DOM，
<div id="abc"><span>hello world</span></div>
5. state
6. + DOM ( )
['div', {id: 'abc'}, ['span', {}, 'Bye bye']]
7. DOM DOM ， ，span ( )
8. DOM， span
：
，
( ， )
： (Andorid IOS) DOM ， DOM， 。 DOM， DOM，
：
JS JS ， JS DOM WebApplication API， API
```
4-5仮想DOMの詳細
JSX ， DOM
return (
<div onClick={this.handleClick}>
{test} - {content}
</div>
)
JSX DOM： JSX -> createElement -> DOM( JS )-> DOM
return <div>item</div> createElement
<==>
return React.createElement('div', {}, 'item');